/* =====================================================================
HITMee — sistem tampilan
Tanpa dependensi eksternal supaya aplikasi tetap jalan tanpa internet.
===================================================================== */
:root {
--bg: #f1f5f9;
--surface: #ffffff;
--surface-alt: #f8fafc;
--border: #e2e8f0;
--border-firm: #cbd5e1;
--text: #0f172a;
--text-soft: #475569;
--muted: #94a3b8;
/*
* Warna korporat Adev — diambil langsung dari piksel berkas logo
* (assets/img/logo-adev.png), bukan perkiraan:
* navy #042e64 (warna dominan wordmark)
* kuning #f6ce3e (warna perisai)
*/
--brand: #042e64;
--brand-dark: #021d42;
--brand-soft: #eef2f8;
--brand-line: #c2cee2;
--accent: #f6ce3e;
--accent-dark: #c9a11a;
--accent-soft: #fef8e4;
--accent-line: #f3e0a4;
--ok: #047857;
--ok-soft: #ecfdf5;
--ok-line: #a7f3d0;
--warn: #b45309;
--warn-soft: #fffbeb;
--warn-line: #fde68a;
--bad: #b91c1c;
--bad-soft: #fef2f2;
--bad-line: #fecaca;
--sidebar: #032246;
--sidebar-alt: #0a3a70;
--sidebar-txt: #b6c6dd;
--radius: 8px;
--shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 1px 3px rgba(15, 23, 42, .08);
--shadow-lg: 0 10px 25px -5px rgba(15, 23, 42, .12), 0 8px 10px -6px rgba(15, 23, 42, .08);
--font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--mono: ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace;
--sidebar-w: 236px;
}
* { box-sizing: border-box; }
html, body {
margin: 0;
padding: 0;
}
body {
font-family: var(--font);
font-size: 14px;
line-height: 1.5;
color: var(--text);
background: var(--bg);
-webkit-font-smoothing: antialiased;
}
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; line-height: 1.3; }
/* ------------------------------------------------------------------ */
/* Kerangka halaman */
/* ------------------------------------------------------------------ */
.app { display: flex; min-height: 100vh; }
.sidebar {
width: var(--sidebar-w);
flex: 0 0 var(--sidebar-w);
background: var(--sidebar);
color: var(--sidebar-txt);
display: flex;
flex-direction: column;
position: sticky;
top: 0;
height: 100vh;
overflow-y: auto;
}
.brand {
padding: 18px 18px 16px;
border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.brand-name {
font-size: 17px;
font-weight: 700;
color: #fff;
letter-spacing: -.2px;
display: flex;
align-items: center;
gap: 9px;
}
.brand-mark {
width: 26px;
height: 29px;
flex: 0 0 26px;
object-fit: contain;
}
/* Tagline berupa kalimat, bukan label — jadi tidak dibuat huruf kapital
semua: pada lebar sidebar 236px kalimat sepanjang ini akan pecah jadi
tiga baris dan sulit dibaca. */
.brand-sub {
font-size: 10.5px;
color: #7e93b4;
margin-top: 4px;
padding-left: 35px;
line-height: 1.35;
font-style: italic;
}
.nav { padding: 12px 10px 24px; flex: 1; }
/* ------------------------------------------------------------------ */
/* Identitas pemakai di dasar sidebar */
/* ------------------------------------------------------------------ */
/* Menempel di bawah lewat margin-top:auto pada wadah flex sidebar,
supaya tetap di dasar walau daftar menunya pendek — peran Operator
hanya punya sembilan menu. */
.sidebar-akun {
margin-top: auto;
padding: 14px 16px 16px;
border-top: 1px solid rgba(255, 255, 255, .1);
background: rgba(0, 0, 0, .14);
}
.sidebar-akun .sa-nama {
color: #fff;
font-size: 13px;
font-weight: 600;
line-height: 1.3;
word-break: break-word;
}
.sidebar-akun .sa-peran {
font-size: 11px;
color: var(--accent);
margin-top: 2px;
letter-spacing: .2px;
}
.sidebar-akun .sa-aksi {
display: flex;
align-items: center;
gap: 10px;
margin-top: 9px;
}
.sidebar-akun .sa-aksi form { margin: 0; }
.sidebar-akun .sa-aksi a,
.sidebar-akun .sa-aksi button {
background: none;
border: 0;
padding: 0;
font: inherit;
font-size: 11.5px;
color: #93a9c8;
cursor: pointer;
text-decoration: none;
}
.sidebar-akun .sa-aksi a:hover,
.sidebar-akun .sa-aksi button:hover { color: #fff; text-decoration: underline; }
.nav-group {
font-size: 10px;
text-transform: uppercase;
letter-spacing: .8px;
color: #7e93b4;
padding: 14px 10px 6px;
font-weight: 600;
}
/* Keterangan siapa yang dituju tiap kelompok. Ditulis sekarang walau hak
akses belum dipasang, supaya susunannya tidak perlu ditata ulang nanti. */
.nav-group span {
display: block;
text-transform: none;
letter-spacing: 0;
font-weight: 400;
font-size: 10px;
color: #61789b;
margin-top: 1px;
}
.nav a {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 10px;
border-radius: 6px;
color: var(--sidebar-txt);
font-size: 13.5px;
margin-bottom: 1px;
transition: background .12s, color .12s;
}
.nav a:hover { background: var(--sidebar-alt); color: #fff; text-decoration: none; }
/* Menu aktif memakai kuning Adev agar halaman yang sedang dibuka menonjol
di atas latar navy. */
.nav a.active {
background: var(--accent);
color: var(--brand-dark);
font-weight: 600;
}
.nav a.active:hover { background: var(--accent); color: var(--brand-dark); }
.nav a .ico { width: 18px; text-align: center; font-size: 14px; flex: 0 0 18px; }
.nav a .seq {
margin-left: auto;
font-size: 10px;
color: #7e93b4;
font-variant-numeric: tabular-nums;
}
.nav a.active .seq { color: rgba(11, 34, 71, .65); }
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
background: var(--surface);
border-bottom: 1px solid var(--border);
padding: 14px 24px;
display: flex;
align-items: center;
gap: 16px;
position: sticky;
top: 0;
z-index: 20;
}
/*
* Berkas logo punya bingkai kosong sekitar 25% dari tingginya (atas 29px,
* bawah 27px dari total 228px). Tinggi 44px dipilih supaya bagian yang
* terlihat menjadi ±33px — sepadan dengan dua baris teks di sebelahnya.
* Sisa ruang transparan di kanan (±4px pada skala ini) sudah menjadi jarak
* alami ke nama PT, jadi tidak perlu margin tambahan.
*/
.topbar-logo {
height: 44px;
width: auto;
flex: 0 0 auto;
object-fit: contain;
}
.topbar h1 { font-size: 18px; letter-spacing: -.2px; }
.topbar .crumb {
font-size: 12px;
font-weight: 600;
color: var(--brand);
margin-bottom: 1px;
}
.topbar .spacer { flex: 1; }
.topbar .today {
font-size: 12px;
color: var(--text-soft);
background: var(--surface-alt);
border: 1px solid var(--border);
padding: 5px 10px;
border-radius: 6px;
white-space: nowrap;
}
.content { padding: 20px 24px 48px; flex: 1; }
/* ------------------------------------------------------------------ */
/* Kartu & panel */
/* ------------------------------------------------------------------ */
.card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow);
margin-bottom: 18px;
overflow: hidden;
}
.card-head {
padding: 13px 16px;
border-bottom: 1px solid var(--border);
display: flex;
align-items: center;
gap: 12px;
background: var(--surface-alt);
}
.card-head h2 { font-size: 14px; }
.card-head .sub { font-size: 12px; color: var(--muted); }
.card-head .spacer { flex: 1; }
.card-body { padding: 16px; }
.card-body.tight { padding: 0; }
/* ------------------------------------------------------------------ */
/* Statistik */
/* ------------------------------------------------------------------ */
.stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
gap: 12px;
margin-bottom: 18px;
}
.stat {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 14px 16px;
box-shadow: var(--shadow);
}
.stat .label {
font-size: 11px;
text-transform: uppercase;
letter-spacing: .5px;
color: var(--muted);
font-weight: 600;
}
.stat .value {
font-size: 26px;
font-weight: 700;
letter-spacing: -.5px;
margin-top: 4px;
font-variant-numeric: tabular-nums;
}
.stat .value.ok { color: var(--ok); }
.stat .value.warn { color: var(--warn); }
.stat .value.bad { color: var(--bad); }
.stat .hint { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
/* "Rp" tidak boleh setinggi angkanya — kalau sama besar, mata membacanya
sebagai bagian dari bilangan. */
.stat .value .satuan { font-size: 14px; font-weight: 600; margin-right: 3px; color: var(--muted); }
/* Nilai rupiah sedikit lebih kecil dan tidak boleh pecah baris; isinya
sudah diringkas jadi "23,74 M" supaya muat di lebar kartu. */
.stat .value.uang { font-size: 22px; white-space: nowrap; }
.stat .value { overflow: hidden; text-overflow: ellipsis; }
/*
* Kartu yang sekaligus penyaring tabel di bawahnya. Berupa , jadi bisa
* dibuka di tab baru dan alamatnya bisa disalin — perilaku yang hilang bila
* penyaringannya dikerjakan JavaScript.
*/
.stats-pilih .stat {
display: block;
color: inherit;
text-decoration: none;
border-bottom: 3px solid transparent;
transition: border-color .12s, box-shadow .12s, transform .12s;
}
.stats-pilih .stat:hover {
text-decoration: none;
border-bottom-color: var(--border-firm);
box-shadow: var(--shadow-lg);
transform: translateY(-1px);
}
.stats-pilih .stat.is-aktif {
border-bottom-color: var(--brand);
background: var(--brand-soft);
box-shadow: var(--shadow-lg);
}
.stats-pilih .stat.is-aktif .label { color: var(--brand); }
/* LT yang melewati target ditandai juga di Dashboard, sama seperti di
Batch Report — supaya artinya tidak berubah antar halaman. */
.lt-lewat { color: var(--warn); font-weight: 700; }
/* Keterangan warna grafik banyak garis. */
.grafik-legenda {
display: flex;
flex-wrap: wrap;
gap: 6px 16px;
margin-top: 10px;
font-size: 12px;
color: var(--text-soft);
}
.grafik-legenda .gl-item { display: inline-flex; align-items: center; gap: 6px; }
.grafik-legenda .gl-warna {
width: 14px;
height: 3px;
border-radius: 2px;
flex: 0 0 14px;
}
/* Pemilih sediaan pada grafik Yield — banyak pilihan, jadi dibiarkan
mengalir beberapa baris alih-alih memaksa satu baris panjang. */
.pilih-sediaan {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px 12px;
padding: 10px 12px;
margin-bottom: 14px;
background: var(--surface-alt);
border: 1px solid var(--border);
border-radius: var(--radius);
}
.pilih-sediaan .cek {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 12.5px;
cursor: pointer;
white-space: nowrap;
}
.pilih-sediaan .cek input { margin: 0; }
/* Pemilih deret grafik — sama bentuknya dengan pemilih sediaan, hanya
ditambah contoh warna garisnya supaya centang dan garis mudah dipasangkan. */
.pilih-seri {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px 14px;
padding: 10px 12px;
margin-bottom: 14px;
background: var(--surface-alt);
border: 1px solid var(--border);
border-radius: var(--radius);
}
.pilih-seri .ps-judul {
font-size: 11px;
text-transform: uppercase;
letter-spacing: .5px;
color: var(--muted);
font-weight: 600;
}
.pilih-seri .cek {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 12.5px;
cursor: pointer;
white-space: nowrap;
}
.pilih-seri .cek input { margin: 0; }
/* ------------------------------------------------------------------ */
/* Tabel */
/* ------------------------------------------------------------------ */
/*
* Tabel digulir di dalam kotaknya sendiri, bukan ikut menggulung halaman.
* Dengan begitu batang gulir mendatar selalu berada di dalam layar — tidak
* perlu turun sampai baris terakhir dulu untuk bisa menggeser ke kanan.
* Judul kolom dan kolom beku tetap menempel karena kotak inilah yang
* menjadi acuan position: sticky.
*
* Tabel pendek tidak terpengaruh: max-height baru bekerja saat isinya
* memang melebihi tinggi layar.
*/
.table-wrap {
overflow: auto;
/* Nilai awal; disetel ulang lebih tepat oleh JavaScript sesuai posisi
tabel di layar, karena tinggi bagian di atasnya berbeda-beda
antar halaman. */
max-height: calc(100vh - 250px);
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
}
table.data {
width: 100%;
border-collapse: separate;
border-spacing: 0;
font-size: 13px;
white-space: nowrap;
}
table.data th,
table.data td {
padding: 8px 10px;
border-bottom: 1px solid var(--border);
text-align: left;
vertical-align: middle;
}
table.data thead th {
background: var(--surface-alt);
font-size: 11px;
text-transform: uppercase;
letter-spacing: .4px;
color: var(--text-soft);
font-weight: 600;
position: sticky;
top: 0;
z-index: 5;
border-bottom: 1px solid var(--border-firm);
}
table.data thead th.grp {
text-align: center;
background: var(--brand-soft);
color: var(--brand-dark);
border-left: 1px solid var(--brand-line);
}
table.data tbody tr:hover { background: var(--surface-alt); }
table.data tbody tr.is-highlight { background: var(--brand-soft); }
table.data tbody tr.is-done { color: var(--text-soft); }
table.data td.num, table.data th.num {
text-align: right;
font-variant-numeric: tabular-nums;
}
/* Jam mulai/selesai dan Operation Time — rata tengah agar mudah dibandingkan
antar baris. */
table.data td.center, table.data th.center {
text-align: center;
font-variant-numeric: tabular-nums;
}
table.data td.mono { font-family: var(--mono); font-size: 12px; }
table.data td.wrap { white-space: normal; min-width: 200px; max-width: 320px; }
table.data .sub { display: block; font-size: 11px; color: var(--muted); }
table.data tfoot td {
background: var(--surface-alt);
font-weight: 600;
border-top: 1px solid var(--border-firm);
}
.col-sticky {
position: sticky;
left: 0;
background: var(--surface);
z-index: 4;
border-right: 1px solid var(--border);
}
/*
* Kolom beku bertingkat — dipakai Batch Report untuk menahan tombol
* tindakan beserta identitas batch (No WO … Skala) di tempatnya saat
* tabel digeser ke kanan. Tanpa itu deretan angka proses kehilangan
* pemiliknya begitu digulir.
*
* Lebar tiap kolom dipatok karena `left` kolom berikutnya adalah jumlah
* lebar kolom-kolom sebelumnya. Bila salah satu lebarnya diubah, angka
* `left` sesudahnya harus ikut dihitung ulang — kalau meleset akan
* tampak celah atau tumpang tindih.
*
* 1 Proses 104 → 2 No WO 118 → 3 Tanggal 88
* 4 Produk 190 → 5 Batch 72 → 6 Skala 58 (jumlah 630)
*/
table.data .frz {
position: sticky;
z-index: 4;
background: var(--surface);
}
table.data .frz-1 { left: 0px; width: 104px; min-width: 104px; max-width: 104px; }
table.data .frz-2 { left: 104px; width: 118px; min-width: 118px; max-width: 118px; }
table.data .frz-3 { left: 222px; width: 88px; min-width: 88px; max-width: 88px; }
table.data .frz-4 { left: 310px; width: 190px; min-width: 190px; max-width: 190px; }
table.data .frz-5 { left: 500px; width: 72px; min-width: 72px; max-width: 72px; }
table.data .frz-6 { left: 572px; width: 58px; min-width: 58px; max-width: 58px;
border-right: 1px solid var(--border-firm); }
/* Kolom nama item pada kisi checklist. */
table.matriks .frz-1 { min-width: 230px; }
table.data .frz-1 .btn { width: 100%; padding-left: 4px; padding-right: 4px; }
/* Sel Produk juga memakai `.wrap`, yang mematok min-width 200px dengan
kekhususan lebih tinggi — kolomnya jadi 10px lebih lebar daripada yang
dipakai menghitung `left` di atas, dan kolom sesudahnya tertimpa. */
table.data td.frz-4.wrap { min-width: 190px; max-width: 190px; }
/*
* Sel judul kolom beku harus mengungguli sel judul lainnya.
* Semua | sudah sticky pada z-index yang sama, sehingga yang letaknya
* lebih belakang di DOM akan menimpa kolom beku ini begitu tabel digulir
* ke kanan. Pemilih di bawah sengaja dibuat lebih spesifik daripada
* `table.data thead th` agar z-index-nya benar-benar diterapkan.
*/
table.data thead th.col-sticky,
table.data thead th.frz {
z-index: 7;
background: var(--surface-alt);
}
tbody tr:hover .col-sticky,
tbody tr:hover .frz { background: var(--surface-alt); }
tbody tr.is-highlight .col-sticky,
tbody tr.is-highlight .frz { background: var(--brand-soft); }
/* Navigasi halaman pada tabel yang isinya banyak */
.paging {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
padding: 12px 16px;
border-top: 1px solid var(--border);
background: var(--surface-alt);
}
.empty {
padding: 44px 20px;
text-align: center;
color: var(--muted);
}
.empty .big { font-size: 30px; margin-bottom: 8px; opacity: .5; }
.empty p { margin: 4px 0 14px; }
/* ------------------------------------------------------------------ */
/* Tombol */
/* ------------------------------------------------------------------ */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 7px 13px;
border-radius: 6px;
border: 1px solid var(--border-firm);
background: var(--surface);
color: var(--text);
font-size: 13px;
font-family: inherit;
font-weight: 500;
cursor: pointer;
white-space: nowrap;
transition: background .12s, border-color .12s, box-shadow .12s;
}
.btn:hover { background: var(--surface-alt); text-decoration: none; border-color: var(--muted); }
.btn:active { transform: translateY(.5px); }
.btn:disabled, .btn.is-disabled {
opacity: .5;
cursor: not-allowed;
pointer-events: none;
}
.btn-primary {
background: var(--brand);
border-color: var(--brand);
color: #fff;
}
.btn-primary:hover { background: var(--brand-dark); border-color: var(--brand-dark); color: #fff; }
.btn-ok { background: var(--ok); border-color: var(--ok); color: #fff; }
.btn-ok:hover { background: #065f46; border-color: #065f46; color: #fff; }
.btn-danger { background: var(--surface); border-color: var(--bad-line); color: var(--bad); }
.btn-danger:hover { background: var(--bad-soft); border-color: var(--bad); }
.btn-sm { padding: 4px 9px; font-size: 12px; border-radius: 5px; }
.btn-xs { padding: 3px 7px; font-size: 11px; border-radius: 4px; gap: 4px; }
.btn-ghost { border-color: transparent; background: transparent; }
.btn-ghost:hover { background: var(--surface-alt); border-color: var(--border); }
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
/* ------------------------------------------------------------------ */
/* Badge & label */
/* ------------------------------------------------------------------ */
.badge {
display: inline-block;
padding: 2px 8px;
border-radius: 999px;
font-size: 11px;
font-weight: 600;
line-height: 1.6;
border: 1px solid transparent;
white-space: nowrap;
}
.badge.ok { background: var(--ok-soft); color: var(--ok); border-color: var(--ok-line); }
.badge.warn { background: var(--warn-soft); color: var(--warn); border-color: var(--warn-line); }
.badge.bad { background: var(--bad-soft); color: var(--bad); border-color: var(--bad-line); }
.badge.info { background: var(--brand-soft);color: var(--brand-dark); border-color: var(--brand-line); }
.badge.muted { background: var(--surface-alt); color: var(--muted); border-color: var(--border); }
/* ------------------------------------------------------------------ */
/* Sel proses pada Batch Report */
/* ------------------------------------------------------------------ */
/* Sel proses kini hanya memuat angka keluarannya — seperti spreadsheet.
Tombolnya pindah ke satu pop-up per baris. */
.proc-cell {
min-width: 74px;
border-left: 1px solid var(--border);
padding: 8px 10px !important;
vertical-align: middle;
text-align: right;
font-variant-numeric: tabular-nums;
font-weight: 600;
font-size: 13px;
}
.proc-val {
font-size: 13px;
font-weight: 600;
font-variant-numeric: tabular-nums;
text-align: right;
margin-bottom: 4px;
color: var(--text);
}
.proc-val.kosong { color: var(--muted); font-weight: 400; }
.proc-val .unit { font-size: 10px; font-weight: 400; color: var(--muted); margin-left: 2px; }
.proc-meta { font-size: 10px; color: var(--muted); text-align: right; margin-bottom: 5px; }
.proc-actions { display: flex; gap: 4px; justify-content: flex-end; }
/* --- Keadaan sel proses, dibedakan warna latar --------------------- */
/*
* Warnanya sengaja pekat dan berbeda tajam: yang dibaca dari tabel ini
* adalah keadaan tujuh proses sekaligus dalam sekali lihat, jadi bedanya
* harus tertangkap tanpa membaca angkanya dulu.
*
* selesai hijau tua sudah tuntas
* kerjakan kuning giliran proses ini
* menunggu merah tua belum bisa dikerjakan
* lewat abu-abu tidak dilalui batch ini
* dilewati abu-abu dilewati atas keputusan operator
*/
.proc-cell.selesai {
background: #0f6b45;
color: #eafaf2;
}
.proc-cell.kerjakan {
background: #ffd43b;
color: #4a3b00;
font-weight: 700;
}
.proc-cell.menunggu {
background: #8f1d1d;
color: #ffe9e9;
}
.proc-cell.lewat,
.proc-cell.dilewati {
background: #cbd5e1;
color: #64748b;
}
/* Tanda pengganti angka: em dash untuk yang tidak dilalui, en dash untuk
yang belum ada angkanya. Dibuat samar agar angka tetap yang menonjol. */
.proc-cell .proc-tanda { opacity: .65; }
/* ------------------------------------------------------------------ */
/* Sel keputusan QC atas bulk (tepat setelah kolom Mixing) */
/* ------------------------------------------------------------------ */
/*
* Isinya bertumpuk ke bawah, bukan berjajar — badge, tanggal, lalu tombol
* Pilih. Dengan `nowrap` bawaan tabel semuanya berdiri sebaris dan kolom
* ini melebar sampai tiga kali kolom proses di sebelahnya.
*/
.status-cell {
width: 106px;
min-width: 106px;
max-width: 106px;
padding: 6px 6px !important;
vertical-align: top;
white-space: normal;
text-align: center;
line-height: 1.35;
border-left: 2px solid var(--warn-line);
border-right: 2px solid var(--warn-line);
background: #fffdf6;
}
/* Judulnya ikut menyempit — kalau tetap sebaris, lebarnya yang menentukan
lebar seluruh kolom, bukan isinya. */
table.data thead th.status-head {
width: 106px;
min-width: 106px;
max-width: 106px;
white-space: normal;
background: var(--warn-soft);
color: var(--warn);
border-left-color: var(--warn-line);
}
table.data thead th.status-head span {
font-weight: 400;
text-transform: none;
letter-spacing: 0;
}
/* Badge dan tombol Pilih bertumpuk, bukan bersanding: pada lebar 106px
keduanya tidak muat sebaris, dan yang mengalah adalah badge-nya sampai
tulisannya terpotong. */
.status-cell .status-baris {
flex-direction: column;
align-items: stretch;
gap: 4px;
}
.status-cell .sub { margin-top: 4px; }
.status-cell .btn { width: 100%; padding-left: 2px; padding-right: 2px; }
/* --- Kolom Sisa Bulk (menggantikan kolom Aksi) ---------------------- */
table.data thead th.sisa-head {
width: 96px;
min-width: 96px;
max-width: 96px;
white-space: normal;
}
table.data thead th.sisa-head span {
font-weight: 400;
text-transform: none;
letter-spacing: 0;
}
.sisa-cell {
width: 96px;
min-width: 96px;
max-width: 96px;
padding: 6px 6px !important;
white-space: normal;
text-align: center;
line-height: 1.35;
border-left: 1px solid var(--border);
font-variant-numeric: tabular-nums;
}
.sisa-cell.ada { background: var(--brand-soft); }
.sisa-cell .btn { width: 100%; margin-top: 4px; padding-left: 2px; padding-right: 2px; }
/* --- Kolom LT Produksi (menggantikan kolom Aging) -------------------- */
table.data thead th.lt-head {
width: 118px;
min-width: 118px;
max-width: 118px;
white-space: normal;
text-align: right;
}
table.data thead th.lt-head span {
font-weight: 400;
text-transform: none;
letter-spacing: 0;
}
.lt-cell {
width: 118px;
min-width: 118px;
max-width: 118px;
padding: 6px 6px !important;
white-space: normal;
text-align: right;
line-height: 1.35;
font-variant-numeric: tabular-nums;
}
/* Yang lewat target ditandai — itu satu-satunya baris yang menuntut
tindakan, jadi harus terlihat tanpa dibaca satu per satu. */
.lt-cell.lewat { background: var(--warn-soft); }
.lt-cell.lewat strong { color: var(--warn); }
.lt-cell .lt-alasan {
display: block;
font-size: 11px;
color: var(--text-soft);
margin-top: 2px;
}
.lt-cell .btn { width: 100%; margin-top: 4px; padding-left: 2px; padding-right: 2px; }
/* --- Gudang WIP ----------------------------------------------------- */
/* Angka yang sudah terpakai ditegaskan: itu satu-satunya kolom yang
berubah tanpa pernah diketik siapa pun. */
table.data td.terpakai { color: var(--warn); font-weight: 600; }
.isian-stok { display: flex; align-items: center; gap: 6px; }
.isian-stok input[type="number"] { width: 96px; text-align: right; }
/* Dua isian berdampingan di dalam pop-up — jumlah dan satuannya. */
.baris-isian { display: flex; gap: 12px; align-items: flex-end; }
.baris-isian .field { margin: 0; }
.baris-isian .field.grow { flex: 1; }
/* Penanda "wajib" pada label — muncul hanya saat aturannya berlaku. */
.wajib {
display: inline-block;
margin-left: 6px;
padding: 1px 6px;
border-radius: 999px;
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .4px;
background: var(--bad-soft, #fee2e2);
color: var(--bad, #b91c1c);
}
.status-cell.ada { background: var(--warn-soft); }
.status-cell .proc-val { text-align: right; }
.status-cell .proc-meta { margin-top: 4px; }
/* ------------------------------------------------------------------ */
/* Pop-up (dialog) */
/* ------------------------------------------------------------------ */
dialog.dlg {
border: 1px solid var(--border);
border-radius: 12px;
padding: 0;
width: min(560px, calc(100vw - 32px));
box-shadow: 0 24px 50px -12px rgba(15, 23, 42, .35);
color: var(--text);
background: var(--surface);
}
dialog.dlg::backdrop { background: rgba(15, 23, 42, .45); }
.dlg-head {
padding: 16px 20px 13px;
border-bottom: 1px solid var(--border);
background: var(--surface-alt);
border-radius: 12px 12px 0 0;
}
.dlg-head h3 { font-size: 16px; }
.dlg-sub { font-size: 12.5px; color: var(--muted); margin-top: 3px; }
.dlg-body { padding: 18px 20px; max-height: 70vh; overflow-y: auto; }
.dlg-foot {
display: flex;
align-items: center;
gap: 10px;
padding: 13px 20px;
border-top: 1px solid var(--border);
background: var(--surface-alt);
border-radius: 0 0 12px 12px;
}
/* Pilihan status sebagai kartu, lengkap dengan akibatnya */
.pilih-status { display: grid; gap: 8px; }
.pilih-status .opsi {
display: flex;
align-items: flex-start;
gap: 11px;
padding: 11px 13px;
border: 1px solid var(--border-firm);
border-radius: 8px;
cursor: pointer;
transition: border-color .12s, background .12s;
}
.pilih-status .opsi:hover { border-color: var(--muted); background: var(--surface-alt); }
.pilih-status .opsi input { margin-top: 3px; flex: 0 0 auto; cursor: pointer; }
.pilih-status .isi { display: flex; flex-direction: column; gap: 2px; }
.pilih-status .judul { font-size: 14px; font-weight: 600; }
.pilih-status .ket { font-size: 12.5px; color: var(--text-soft); line-height: 1.45; }
.pilih-status .opsi.dipilih { background: var(--surface-alt); }
.pilih-status .opsi.ok.dipilih { border-color: var(--ok); background: var(--ok-soft); }
.pilih-status .opsi.ok.dipilih .judul { color: var(--ok); }
.pilih-status .opsi.warn.dipilih { border-color: var(--warn); background: var(--warn-soft); }
.pilih-status .opsi.warn.dipilih .judul { color: var(--warn); }
.pilih-status .opsi.bad.dipilih { border-color: var(--bad); background: var(--bad-soft); }
.pilih-status .opsi.bad.dipilih .judul { color: var(--bad); }
/* ------------------------------------------------------------------ */
/* Progress */
/* ------------------------------------------------------------------ */
.progress {
display: flex;
gap: 2px;
align-items: center;
margin-top: 6px;
}
.progress .seg {
width: 11px;
height: 6px;
border-radius: 2px;
background: var(--border-firm);
}
.progress .seg.selesai { background: var(--ok); }
.progress .seg.kerjakan { background: var(--brand); }
.progress .seg.menunggu { background: var(--border-firm); }
.progress .txt { font-size: 10.5px; color: var(--muted); margin-left: 5px; font-variant-numeric: tabular-nums; }
/* ------------------------------------------------------------------ */
/* Form */
/* ------------------------------------------------------------------ */
.form-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
gap: 14px 16px;
}
.field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.field.span-2 { grid-column: span 2; }
.field.span-all { grid-column: 1 / -1; }
.field label {
font-size: 12px;
font-weight: 600;
color: var(--text-soft);
display: flex;
align-items: center;
gap: 5px;
}
.field label .req { color: var(--bad); }
.field input[type="text"],
.field input[type="number"],
.field input[type="date"],
.field input[type="search"],
.field select,
.field textarea {
width: 100%;
padding: 8px 10px;
border: 1px solid var(--border-firm);
border-radius: 6px;
font-family: inherit;
font-size: 13.5px;
color: var(--text);
background: var(--surface);
transition: border-color .12s, box-shadow .12s;
}
.field textarea { min-height: 66px; resize: vertical; line-height: 1.5; }
.field input:focus, .field select:focus, .field textarea:focus {
outline: none;
border-color: var(--brand);
box-shadow: 0 0 0 3px rgba(29, 78, 216, .12);
}
.field input[readonly], .field input:disabled,
.field select:disabled, .field textarea[readonly] {
background: var(--surface-alt);
color: var(--text-soft);
cursor: default;
}
/* Nilai yang hanya ditampilkan — bukan isian. Tingginya disamakan dengan
input di sebelahnya supaya barisnya tetap rata. */
.field .static-val {
display: flex;
align-items: center;
min-height: 38px;
padding: 0 10px;
background: var(--surface-alt);
border: 1px solid var(--line);
border-radius: 6px;
color: var(--text-soft);
}
/* Input jam 24 jam buatan sendiri — lihat catatan di partials/field_render.php */
.field input.time-input {
font-variant-numeric: tabular-nums;
letter-spacing: .4px;
max-width: 140px;
}
.field .hint { font-size: 11.5px; color: var(--muted); }
.field .err { font-size: 11.5px; color: var(--bad); font-weight: 500; }
.field.has-error input,
.field.has-error select,
.field.has-error textarea { border-color: var(--bad); }
/* Kolom yang tidak berlaku untuk produk ini (mis. Cetakan pada non-sabun) */
.field.tak-berlaku { opacity: .5; }
.field.tak-berlaku input,
.field.tak-berlaku select { background: var(--surface-alt); cursor: not-allowed; }
.field.is-highlight input {
border-color: var(--brand);
background: var(--brand-soft);
font-weight: 600;
}
.fieldset {
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 0;
margin: 0 0 16px;
background: var(--surface);
overflow: hidden;
}
.fieldset > legend { display: none; }
.fieldset-head {
padding: 10px 14px;
background: var(--surface-alt);
border-bottom: 1px solid var(--border);
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .4px;
color: var(--text-soft);
display: flex;
align-items: center;
gap: 8px;
}
.fieldset-body { padding: 16px; }
.form-actions {
display: flex;
gap: 10px;
align-items: center;
padding: 14px 16px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
position: sticky;
bottom: 12px;
box-shadow: var(--shadow-lg);
flex-wrap: wrap;
}
.form-actions .spacer { flex: 1; }
/* ------------------------------------------------------------------ */
/* Filter bar */
/* ------------------------------------------------------------------ */
.filterbar {
display: flex;
gap: 10px;
align-items: flex-end;
flex-wrap: wrap;
padding: 12px 16px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
margin-bottom: 14px;
box-shadow: var(--shadow);
}
.filterbar .field { flex: 0 0 auto; width: 170px; gap: 4px; }
.filterbar .field.grow { flex: 1 1 240px; width: auto; }
.filterbar .field label { font-size: 11px; }
.filterbar .spacer { flex: 1; }
/* ------------------------------------------------------------------ */
/* Notifikasi */
/* ------------------------------------------------------------------ */
.alert {
padding: 11px 14px;
border-radius: var(--radius);
border: 1px solid;
margin-bottom: 14px;
font-size: 13.5px;
display: flex;
align-items: flex-start;
gap: 9px;
}
.alert.ok { background: var(--ok-soft); border-color: var(--ok-line); color: var(--ok); }
.alert.warn { background: var(--warn-soft); border-color: var(--warn-line); color: var(--warn); }
.alert.bad { background: var(--bad-soft); border-color: var(--bad-line); color: var(--bad); }
.alert.info { background: var(--brand-soft);border-color: var(--brand-line);color: var(--brand-dark); }
/* ------------------------------------------------------------------ */
/* Panel identitas tersalin */
/* ------------------------------------------------------------------ */
.copied {
background: var(--brand-soft);
border: 1px solid var(--brand-line);
border-radius: var(--radius);
padding: 12px 14px;
margin-bottom: 16px;
}
.copied .head {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .5px;
color: var(--brand-dark);
margin-bottom: 9px;
display: flex;
align-items: center;
gap: 6px;
}
.copied .items {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(130px, 100%), 1fr));
gap: 10px 16px;
}
.copied .item .k {
font-size: 10.5px;
text-transform: uppercase;
letter-spacing: .4px;
color: #456092;
font-weight: 600;
}
.copied .item .v {
font-size: 13.5px;
font-weight: 600;
color: var(--brand-dark);
word-break: break-word;
}
/* ------------------------------------------------------------------ */
/* Pemilih operator (kotak centang) & kolom kendala "Lainnya" */
/* ------------------------------------------------------------------ */
.operator-pick {
display: flex;
flex-wrap: wrap;
gap: 6px;
padding: 9px;
border: 1px solid var(--border-firm);
border-radius: 6px;
background: var(--surface-alt);
max-height: 190px;
overflow-y: auto;
}
.operator-pick label {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 11px 5px 8px;
background: var(--surface);
border: 1px solid var(--border-firm);
border-radius: 999px;
font-size: 13px;
font-weight: 400;
color: var(--text);
cursor: pointer;
user-select: none;
transition: background .12s, border-color .12s, color .12s;
}
.operator-pick label:hover { border-color: var(--brand); }
.operator-pick label.dipilih {
background: var(--brand-soft);
border-color: var(--brand);
color: var(--brand-dark);
font-weight: 600;
}
.operator-pick input[type="checkbox"] { margin: 0; cursor: pointer; }
.field input.kendala-lainnya { margin-top: 7px; }
.field input.kendala-lainnya[hidden] { display: none; }
/* ------------------------------------------------------------------ */
/* Output per jam (Finishing) — baris yang bisa ditambah/dikurangi */
/* ------------------------------------------------------------------ */
/*
* Baris jam mengalir KE BAWAH dulu, lima baris per kolom, baru pindah ke
* kolom berikutnya (Jam ke-6 mulai kolom kedua). Membaca satu kolom penuh
* dari atas ke bawah jauh lebih mudah daripada melompat menyamping.
*/
.jam-output {
display: grid;
grid-auto-flow: column;
grid-template-rows: repeat(5, auto);
grid-auto-columns: minmax(min(228px, 100%), 1fr);
gap: 8px;
/* Pengaman bila jam lembur membuat kolomnya banyak. */
overflow-x: auto;
padding-bottom: 2px;
}
.jam-baris {
display: flex;
align-items: center;
gap: 8px;
padding: 7px 9px;
background: var(--surface-alt);
border: 1px solid var(--border);
border-radius: 7px;
}
.jam-baris .jam-no {
font-size: 12px;
color: var(--text-soft);
white-space: nowrap;
flex: 0 0 54px;
}
.jam-baris .jam-no b { color: var(--brand); font-variant-numeric: tabular-nums; }
.jam-baris input[type="text"] {
flex: 0 0 68px;
width: 68px;
padding: 6px 8px;
font-size: 13px;
font-variant-numeric: tabular-nums;
letter-spacing: .4px;
text-align: center;
border: 1px solid var(--border-firm);
border-radius: 5px;
font-family: inherit;
background: var(--surface);
color: var(--text);
}
.jam-baris input[type="number"] {
flex: 1 1 auto;
min-width: 0;
padding: 6px 8px;
font-size: 13px;
text-align: right;
font-variant-numeric: tabular-nums;
border: 1px solid var(--border-firm);
border-radius: 5px;
font-family: inherit;
background: var(--surface);
color: var(--text);
}
.jam-baris input:focus {
outline: none;
border-color: var(--brand);
box-shadow: 0 0 0 2px rgba(4, 46, 100, .12);
}
.jam-baris input.galat { border-color: var(--bad); background: var(--bad-soft); }
.jam-baris [data-jam-hapus] {
flex: 0 0 auto;
color: var(--muted);
font-size: 15px;
line-height: 1;
padding: 3px 7px;
}
.jam-baris [data-jam-hapus]:hover { color: var(--bad); background: var(--bad-soft); }
.jam-aksi {
display: flex;
align-items: center;
gap: 12px;
margin-top: 11px;
flex-wrap: wrap;
}
/* ------------------------------------------------------------------ */
/* Kartu sub-menu (halaman muka Master Data) */
/* ------------------------------------------------------------------ */
.menu-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
gap: 14px;
}
.menu-card {
display: flex;
align-items: flex-start;
gap: 14px;
padding: 18px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow);
color: var(--text);
transition: border-color .12s, box-shadow .12s, transform .12s;
}
.menu-card:hover {
text-decoration: none;
border-color: var(--brand);
box-shadow: var(--shadow-lg);
transform: translateY(-1px);
}
.menu-card .ikon {
flex: 0 0 44px;
width: 44px;
height: 44px;
display: grid;
place-items: center;
font-size: 21px;
background: var(--brand-soft);
border: 1px solid var(--brand-line);
border-radius: 10px;
}
.menu-card .isi { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.menu-card .judul { font-size: 15px; font-weight: 600; letter-spacing: -.2px; }
.menu-card .ket { font-size: 12.5px; color: var(--text-soft); line-height: 1.5; }
.menu-card .jumlah {
font-size: 11.5px;
color: var(--muted);
font-variant-numeric: tabular-nums;
margin-top: 4px;
}
.menu-card .panah { color: var(--muted); font-size: 17px; align-self: center; }
.menu-card:hover .panah { color: var(--brand); }
/* ------------------------------------------------------------------ */
/* Panel riwayat entri pada form proses */
/* Muncul bila batch sudah pernah diproses — mis. penimbangan yang */
/* dilanjut keesokan hari — supaya operator tidak mengetik ulang. */
/* ------------------------------------------------------------------ */
.riwayat {
background: var(--warn-soft);
border: 1px solid var(--warn-line);
border-radius: var(--radius);
padding: 12px 14px;
margin-bottom: 16px;
}
.riwayat .head {
font-size: 13px;
font-weight: 700;
color: var(--warn);
margin-bottom: 9px;
}
.riwayat .head .catatan {
font-weight: 400;
color: #92700d;
font-size: 12px;
}
.riwayat .items {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 3px;
}
.riwayat .items li {
display: flex;
align-items: baseline;
gap: 10px;
flex-wrap: wrap;
font-size: 12.5px;
color: #78350f;
background: rgba(255, 255, 255, .55);
border-radius: 5px;
padding: 5px 9px;
}
.riwayat .items .urut { color: #b45309; font-weight: 700; }
.riwayat .items .tgl { font-weight: 600; min-width: 92px; }
.riwayat .items .jam { font-variant-numeric: tabular-nums; letter-spacing: .3px; }
.riwayat .items .dur,
.riwayat .items .out { font-variant-numeric: tabular-nums; font-weight: 600; }
.riwayat .items .ket { color: #92700d; font-style: italic; }
.riwayat .items .ubah { margin-left: auto; font-size: 11.5px; color: var(--warn); font-weight: 600; }
.riwayat .total {
margin-top: 9px;
padding-top: 8px;
border-top: 1px dashed var(--warn-line);
font-size: 12.5px;
color: var(--warn);
}
/* ------------------------------------------------------------------ */
/* Lain-lain */
/* ------------------------------------------------------------------ */
.inline-form { display: inline; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.right { text-align: right; }
.nowrap { white-space: nowrap; }
.kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); gap: 12px 18px; }
.kv .k { font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); font-weight: 600; }
.kv .v { font-size: 14px; font-weight: 500; margin-top: 1px; }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 0; overflow-x: auto; }
.tabs a {
padding: 9px 14px;
font-size: 13px;
color: var(--text-soft);
border-bottom: 2px solid transparent;
white-space: nowrap;
font-weight: 500;
}
.tabs a:hover { color: var(--text); text-decoration: none; background: var(--surface-alt); }
.tabs a.active { color: var(--brand); border-bottom-color: var(--brand); }
.tabs .count {
display: inline-block;
background: var(--surface-alt);
border: 1px solid var(--border);
border-radius: 999px;
padding: 0 6px;
font-size: 10.5px;
margin-left: 5px;
color: var(--text-soft);
}
/* Baris entri yang salah satu bagiannya belum diisi — supaya terlihat
saat menyapu daftar, bukan baru ketahuan setelah formulirnya dibuka. */
table.data tbody tr.baris-belum-lengkap { background: var(--warn-soft, #fffbeb); }
table.data tbody tr.baris-belum-lengkap:hover { background: #fef6e0; }
table.data tbody tr.baris-belum-lengkap .col-sticky { background: var(--warn-soft, #fffbeb); }
/* ------------------------------------------------------------------ */
/* Penimbangan dua bagian: serbuk & cairan */
/* ------------------------------------------------------------------ */
/*
* Ditaruh berdampingan supaya terlihat sekali pandang bagian mana yang
* belum diisi — itulah pertanyaan pertama tim yang mengerjakan belakangan.
*/
.bagian-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
gap: 14px;
margin-top: 16px;
}
.bagian-grid .fieldset { margin: 0; }
.bagian .fieldset-head {
display: flex;
align-items: center;
gap: 10px;
}
.bagian-tanda {
margin-left: auto;
font-size: 11px;
font-weight: 700;
padding: 2px 9px;
border-radius: 999px;
white-space: nowrap;
}
.bagian.is-terisi .bagian-tanda { background: var(--ok-soft, #ecfdf5); color: var(--ok); }
.bagian.is-kosong .bagian-tanda { background: var(--warn-soft, #fffbeb); color: var(--warn); }
.bagian.is-kosong { border-color: var(--warn); }
/* ------------------------------------------------------------------ */
/* Panel penilaian Hit/Miss pada form proses */
/* ------------------------------------------------------------------ */
/*
* Acuan waktu ditaruh sebaris supaya terbaca sekali pandang sambil jam
* diketik — operator tidak perlu berpindah pandangan untuk tahu apakah
* pekerjaannya masih di dalam target.
*/
.penilaian .nilai-baris {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px 18px;
margin-bottom: 3px;
}
.penilaian .nilai-item {
font-size: 12.5px;
color: var(--text-soft);
white-space: nowrap;
}
.penilaian .nilai-item strong {
display: inline-block;
margin-left: 5px;
font-size: 13.5px;
color: var(--text);
}
.penilaian #nilai-vonis { font-size: 12px; }
/* Kolom Kendala saat hasilnya Miss — ditandai sebelum Simpan ditekan,
bukan setelah formulirnya ditolak. */
.field.is-wajib > label { color: var(--bad); }
.field.is-wajib select,
.field.is-wajib input[type="text"] {
border-color: var(--bad);
background: var(--bad-soft, #fdf2f2);
}
/* ==================================================================== */
/* Penyesuaian layar — PC, laptop, tablet, dan HP */
/* ==================================================================== */
/*
* Tiga keadaan, bukan satu titik putus:
*
* > 1024px PC & laptop — menu penuh di kiri, seperti semula
* 761-1024 tablet mendatar & laptop kecil — menu menyusut jadi ikon
* <= 760px tablet tegak & HP — menu jadi LACI yang ditarik dari kiri
*
* Yang paling menentukan di layar sempit bukan ukuran huruf, melainkan
* ruang: menu tetap selebar 62px pun memakan seperenam layar HP, padahal
* yang dibutuhkan operator di lantai produksi adalah tabelnya. Karena itu
* di bawah 760px menunya disingkirkan sama sekali sampai dipanggil.
*/
/* Tombol menu hanya ada di layar kecil; di layar lebar tidak pernah muncul. */
.nav-toggle {
display: none;
flex: 0 0 auto;
width: 40px;
height: 40px;
padding: 0;
border: 1px solid var(--border);
border-radius: 8px;
background: var(--surface-alt);
cursor: pointer;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
}
.nav-toggle span {
display: block;
width: 18px;
height: 2px;
background: var(--text);
border-radius: 2px;
}
.nav-toggle:hover { background: var(--brand-soft); }
.nav-backdrop {
display: none;
position: fixed;
inset: 0;
background: rgba(15, 23, 42, .45);
z-index: 50;
}
/* -------------------------------------------------------------- */
/* Tablet mendatar & laptop kecil — menu menyusut jadi ikon */
/* -------------------------------------------------------------- */
@media (min-width: 761px) and (max-width: 1024px) {
:root { --sidebar-w: 62px; }
.brand-name span:not(.brand-mark) { display: none; }
.brand-sub { display: none; }
.brand { padding: 14px 8px; }
.nav a span:not(.ico) { display: none; }
.nav a { justify-content: center; }
.nav a .seq { display: none; }
.nav-group { text-align: center; font-size: 9px; padding: 10px 0 4px; }
.nav-group span { display: none; }
.sidebar-akun { padding: 10px 6px; text-align: center; }
.sidebar-akun .sa-nama,
.sidebar-akun .sa-peran { display: none; }
.content { padding: 14px 16px 40px; }
.topbar { padding: 12px 16px; gap: 12px; }
.field.span-2 { grid-column: span 1; }
}
/* -------------------------------------------------------------- */
/* Tablet tegak & HP — menu menjadi laci */
/* -------------------------------------------------------------- */
@media (max-width: 760px) {
.nav-toggle { display: flex; }
.sidebar {
position: fixed;
top: 0;
left: 0;
bottom: 0;
width: 258px;
flex-basis: 258px;
height: 100%;
z-index: 60;
transform: translateX(-100%);
transition: transform .22s ease;
box-shadow: 8px 0 28px -8px rgba(15, 23, 42, .5);
}
body.nav-open .sidebar { transform: none; }
body.nav-open .nav-backdrop { display: block; }
/* Halaman di belakang laci tidak ikut menggulung. */
body.nav-open { overflow: hidden; }
/* Menu penuh kembali di dalam laci — di sini ruangnya memang ada. */
.brand-name span:not(.brand-mark) { display: inline; }
.brand-sub { display: block; }
.nav a span:not(.ico) { display: inline; }
.nav a { justify-content: flex-start; padding: 11px 12px; }
.topbar {
padding: 10px 12px;
gap: 10px;
}
.topbar-logo { height: 34px; }
.topbar h1 { font-size: 15px; }
.topbar .crumb { font-size: 10.5px; }
/* Tanggal hari ini bukan informasi yang dicari di HP, dan memakan
seluruh lebar yang tersisa dari judul halaman. */
.topbar .today { display: none; }
.content { padding: 12px 12px 40px; }
.card { margin-bottom: 12px; border-radius: 8px; }
.card-head { padding: 11px 12px; flex-wrap: wrap; gap: 6px 10px; }
.card-head .spacer { flex-basis: 100%; height: 0; }
.card-body { padding: 12px; }
/* Satu kolom: dua kolom pada layar 360px menyisakan 160px per kolom,
terlalu sempit untuk isian tanggal maupun angka. */
.form-grid { grid-template-columns: 1fr; gap: 12px; }
.field.span-2, .field.span-all { grid-column: span 1; }
.filterbar { padding: 10px 12px; gap: 8px; }
.filterbar .field,
.filterbar .field.grow { flex: 1 1 100%; width: auto; }
.filterbar .spacer { display: none; }
.filterbar .btn { flex: 1 1 auto; }
/*
* Kolom beku dilepas di HP.
*
* Enam kolom beku Batch Report berjumlah 630px — lebih lebar dari layar
* HP mana pun, sehingga yang "dibekukan" justru menutupi seluruh tabel
* dan tidak menyisakan apa pun untuk dilihat. Di layar selebar ini
* menggulung mendatar lebih berguna daripada kolom yang menetap.
*/
table.data .frz { position: static; }
table.data .frz-1, table.data .frz-2, table.data .frz-3,
table.data .frz-4, table.data .frz-5, table.data .frz-6 {
left: auto;
max-width: none;
}
table.data { font-size: 12px; }
table.data th, table.data td { padding: 7px 8px; }
table.data td.wrap { min-width: 150px; max-width: 220px; }
/*
* Kecuali nama item pada kisi checklist — itu justru satu-satunya
* yang harus tetap terlihat. Menggulung ke tanggal 25 tanpa nama
* itemnya berarti mencentang kotak tanpa tahu isinya apa. Dipersempit
* jadi 132px dan dibuat membungkus dua baris, sehingga masih tersisa
* sekitar enam kolom tanggal yang terlihat sekaligus.
*/
table.matriks .frz-1 {
position: sticky;
left: 0;
z-index: 4;
background: var(--surface);
width: 132px;
min-width: 132px;
max-width: 132px;
white-space: normal;
font-size: 11px;
line-height: 1.25;
border-right: 1px solid var(--border-firm);
}
/* Sasaran sentuh: 40px adalah batas nyaman untuk jari, dan isian
setinggi 30px membuat operator sering meleset ke kolom sebelahnya. */
.field input, .field select, .field textarea,
table.data input, table.data select { min-height: 40px; }
.btn { min-height: 40px; padding: 8px 14px; }
/* Tombol di dalam sel tabel tidak bisa setinggi 40px — barisnya akan
membengkak dan yang terlihat sekali layar tinggal tiga batch. 36px
masih terjangkau jari tanpa merusak kepadatan tabelnya. */
.btn-xs { min-height: 36px; }
.form-actions { flex-wrap: wrap; gap: 8px; }
.form-actions .btn { flex: 1 1 auto; justify-content: center; }
dialog.dlg { width: calc(100vw - 20px); border-radius: 10px; }
.dlg-body { max-height: calc(100vh - 190px); padding: 14px; }
.dlg-head { padding: 13px 14px 11px; }
.dlg-foot { padding: 11px 14px; flex-wrap: wrap; gap: 8px; }
.dlg-foot .btn { flex: 1 1 auto; justify-content: center; }
.kpi-row, .stats { grid-template-columns: 1fr 1fr; gap: 8px; }
.kpi { padding: 11px 12px; }
}
/* -------------------------------------------------------------- */
/* Kolom beku disesuaikan dengan ruang yang benar-benar ada */
/* -------------------------------------------------------------- */
/*
* Enam kolom beku Batch Report berjumlah 630px. Di layar lebar itu pas —
* identitas batch tetap terlihat sementara puluhan kolom proses digeser.
* Di tablet tegak lebar kotak tabelnya hanya 642px, sehingga yang tersisa
* untuk kolom lain cuma 12px: seluruh layar terisi kolom yang "dibekukan"
* dan tidak ada lagi yang bisa dilihat.
*
* Karena itu jumlahnya dikurangi mengikuti ruang. Di tablet cukup dua kolom
* pertama — Proses dan No WO, yang menjawab "ini batch yang mana" — dan
* sisanya ikut menggulung.
*/
@media (min-width: 761px) and (max-width: 1024px) {
table.data .frz-3, table.data .frz-4,
table.data .frz-5, table.data .frz-6 {
position: static;
left: auto;
}
/* Garis pemisah ikut pindah ke kolom beku terakhir yang tersisa. */
table.data .frz-6 { border-right: 0; }
table.data .frz-2 { border-right: 1px solid var(--border-firm); }
}
/* HP sempit — dua kolom kartu pun sudah terlalu padat. */
@media (max-width: 420px) {
.kpi-row, .stats { grid-template-columns: 1fr; }
.topbar .crumb { display: none; }
.content { padding: 10px 10px 36px; }
}
/* Laci tidak boleh muncul lagi begitu layar melebar — tanpa ini,
memutar tablet ke posisi mendatar meninggalkan latar gelap menutupi
halaman sementara menunya sendiri sudah kembali ke tempatnya. */
@media (min-width: 761px) {
.nav-backdrop { display: none !important; }
body.nav-open { overflow: auto; }
}
@media print {
.sidebar, .topbar, .filterbar, .form-actions, .proc-actions, .btn,
.nav-toggle, .nav-backdrop { display: none !important; }
/* Laci yang kebetulan terbuka tidak boleh mengunci gulungan pada
hasil cetak — halamannya akan terpotong satu layar. */
body.nav-open { overflow: visible !important; }
.content { padding: 0; }
.card { box-shadow: none; border: 1px solid #999; }
table.data { font-size: 10px; }
}
/* ==================================================================== */
/* Statistik & Analisis */
/* ==================================================================== */
/* --- Kartu KPI di kepala halaman --- */
.kpi-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
gap: 12px;
margin-bottom: 16px;
}
.kpi {
background: var(--surface);
border: 1px solid var(--border);
border-left: 4px solid var(--border-firm);
border-radius: 8px;
padding: 14px 16px;
}
.kpi-ok { border-left-color: var(--ok); }
.kpi-warn { border-left-color: var(--warn); }
.kpi-judul {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .6px;
color: var(--text-soft);
}
.kpi-nilai {
font-size: 30px;
font-weight: 700;
line-height: 1.15;
color: var(--brand);
font-variant-numeric: tabular-nums;
margin: 4px 0 2px;
}
.kpi-satuan {
font-size: 13px;
font-weight: 600;
color: var(--text-soft);
margin-left: 5px;
}
.kpi-sub { font-size: 12px; color: var(--muted); }
/* --- Penjelasan rumus di atas tiap bagian --- */
.rumus {
background: var(--brand-soft);
border-left: 3px solid var(--brand-line);
border-radius: 0 6px 6px 0;
padding: 10px 14px;
margin: 0 0 16px;
font-size: 13px;
color: var(--text);
}
.rumus .hint { display: block; margin-top: 6px; }
.sub-judul {
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .5px;
color: var(--text-soft);
margin: 22px 0 4px;
}
.sub-judul .sub { text-transform: none; letter-spacing: 0; font-weight: 400; margin-left: 8px; }
/* --- Tautan lompat antar bagian --- */
.anchor-nav { display: flex; gap: 4px; flex-wrap: wrap; }
.anchor-nav a {
font-size: 12px;
font-weight: 600;
padding: 6px 11px;
border-radius: 6px;
color: var(--text-soft);
background: var(--surface-alt);
border: 1px solid var(--border);
text-decoration: none;
}
.anchor-nav a:hover { background: var(--brand); color: #fff; border-color: var(--brand); }
/* --- Grafik SVG --- */
.grafik {
width: 100%;
height: auto;
max-height: 280px;
display: block;
overflow: visible;
}
.g-kisi { stroke: var(--border); stroke-width: 1; }
.g-target { stroke: var(--warn); stroke-width: 1.5; stroke-dasharray: 5 4; }
.g-sumbu { font-size: 10px; fill: var(--muted); font-family: inherit; }
.ket-grafik { font-size: 11px; color: var(--muted); margin: 2px 0 0; }
.ket-target {
display: inline-block;
width: 18px;
border-top: 2px dashed var(--warn);
vertical-align: middle;
margin-right: 5px;
}
/* --- Batang horizontal untuk peringkat berlabel panjang --- */
.bar-datar { display: flex; flex-direction: column; gap: 5px; margin: 8px 0; }
.bd-baris {
display: grid;
grid-template-columns: minmax(120px, 40%) 1fr auto;
gap: 10px;
align-items: center;
font-size: 12px;
}
.bd-label {
color: var(--text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.bd-jalur { background: var(--surface-alt); border-radius: 3px; height: 14px; overflow: hidden; }
.bd-isi { display: block; height: 100%; border-radius: 3px; min-width: 2px; }
.bd-nilai { color: var(--text-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* --- Kendala: satu blok per stasiun kerja --- */
.kendala-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
gap: 8px 28px;
}
.kendala-blok .sub-judul { margin-top: 14px; }
/* --- Tabel ringkas khas halaman ini --- */
table.data.ringkas th, table.data.ringkas td { padding: 7px 10px; font-size: 12.5px; }
table.data.ringkas tfoot th {
background: var(--brand-soft);
color: var(--brand);
border-top: 2px solid var(--brand-line);
}
table.data.rapat th, table.data.rapat td { padding: 5px 8px; font-size: 12px; }
/* --- Keterangan warna grafik bertumpuk --- */
.ket-kotak {
display: inline-block;
width: 11px;
height: 11px;
border-radius: 2px;
vertical-align: -1px;
margin: 0 4px 0 10px;
}
.ket-grafik .ket-kotak:first-child { margin-left: 0; }
/* --- Tiga komponen OEE per mesin --- */
.oee-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
gap: 10px 24px;
margin: 10px 0 14px;
}
.oee-blok {
border: 1px solid var(--border);
border-radius: 6px;
padding: 9px 12px;
background: var(--surface-alt);
}
.oee-nama {
font-size: 12.5px;
font-weight: 700;
color: var(--text);
display: flex;
align-items: baseline;
gap: 8px;
margin-bottom: 6px;
}
.oee-total {
margin-left: auto;
font-weight: 600;
color: var(--brand);
font-variant-numeric: tabular-nums;
}
.oee-baris {
display: grid;
grid-template-columns: 84px 1fr 84px;
gap: 8px;
align-items: center;
font-size: 11.5px;
margin-bottom: 3px;
}
.oee-label { color: var(--text-soft); }
.oee-nilai { text-align: right; color: var(--text-soft); font-variant-numeric: tabular-nums; }
/* --- Label nilai di dalam grafik --- */
.g-nilai {
font-size: 10.5px;
font-weight: 700;
fill: var(--text);
font-family: inherit;
font-variant-numeric: tabular-nums;
paint-order: stroke;
stroke: var(--surface);
stroke-width: 3px;
stroke-linejoin: round;
}
/* Angka yang dicetak di atas batang berwarna butuh kontras terbalik. */
.g-nilai-dalam { fill: #fff; stroke: none; }
/* ==================================================================== */
/* Laporan Harian & Mingguan */
/* ==================================================================== */
/* --- Jalur produktivitas dengan penanda target dan minimal --- */
.prod-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
gap: 12px 20px;
margin: 12px 0 8px;
}
.prod-kepala {
display: flex;
align-items: baseline;
gap: 8px;
margin-bottom: 5px;
}
.prod-nama { font-size: 12.5px; font-weight: 700; }
.prod-kepala .badge { margin-left: auto; font-variant-numeric: tabular-nums; }
.prod-jalur {
position: relative;
height: 16px;
background: var(--surface-alt);
border: 1px solid var(--border);
border-radius: 4px;
overflow: hidden;
}
.prod-isi {
display: block;
height: 100%;
border-radius: 3px 0 0 3px;
min-width: 2px;
}
/* Garis acuan berdiri di atas isian, jadi posisinya tetap terbaca
walau capaiannya sudah melewatinya. */
.prod-garis {
position: absolute;
top: -1px;
bottom: -1px;
width: 2px;
}
.prod-min { background: var(--muted); }
.prod-target { background: var(--brand); }
.prod-kaki { font-size: 11px; color: var(--muted); margin-top: 3px; }
/* --- Kisi grafik kecil berdampingan --- */
.grafik-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
gap: 14px 20px;
}
.grafik-kartu {
border: 1px solid var(--border);
border-radius: 6px;
padding: 10px 12px 6px;
background: var(--surface);
}
.grafik-judul {
font-size: 12.5px;
font-weight: 700;
margin-bottom: 4px;
}
.grafik-judul .sub { font-weight: 400; color: var(--muted); margin-left: 6px; font-size: 11px; }
/* --- Penanda kecil untuk daftar proses / operator --- */
.tag {
display: inline-block;
font-size: 11px;
padding: 1px 7px;
margin: 1px 3px 1px 0;
border-radius: 10px;
background: var(--brand-soft);
color: var(--brand);
border: 1px solid var(--brand-line);
white-space: nowrap;
}
/* ==================================================================== */
/* Absensi Produksi */
/* ==================================================================== */
.absensi-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
gap: 8px 24px;
}
.absensi-tabel input[type="number"] {
width: 100%;
text-align: right;
padding: 3px 6px;
font-variant-numeric: tabular-nums;
}
.absensi-tabel input[type="text"] {
width: 100%;
padding: 3px 6px;
font-size: 12px;
}
.absensi-tabel tfoot th { background: var(--brand-soft); color: var(--brand); }
/* Kotak tanggal yang sudah terisi */
.tgl-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(74px, 1fr));
gap: 8px;
}
.tgl-kotak {
display: flex;
flex-direction: column;
align-items: center;
padding: 7px 4px;
border: 1px solid var(--border);
border-radius: 6px;
background: var(--surface-alt);
text-decoration: none;
color: var(--text);
}
.tgl-kotak:hover {
border-color: var(--brand);
background: var(--brand-soft);
text-decoration: none;
}
.tgl-hari { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; }
.tgl-angka { font-size: 19px; font-weight: 700; line-height: 1.1; color: var(--brand); }
.tgl-jam { font-size: 10.5px; color: var(--text-soft); }
/* Baris operator yang jamnya di luar hitungan serapan */
tbody tr.baris-luar td { background: var(--surface-alt); color: var(--text-soft); }
/* ==================================================================== */
/* Halaman Statistik — grafik saja */
/* ==================================================================== */
.stat-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(430px, 100%), 1fr));
gap: 14px;
align-items: start;
}
/* Grafik berlabel panjang dan blok OEE butuh lebar penuh. */
.stat-kartu.span-2 { grid-column: 1 / -1; }
.stat-kartu {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow);
padding: 12px 14px 8px;
}
.stat-judul {
display: flex;
align-items: baseline;
gap: 8px;
font-size: 13px;
font-weight: 700;
color: var(--text);
margin-bottom: 6px;
padding-bottom: 6px;
border-bottom: 1px solid var(--border);
}
.stat-judul span {
font-weight: 400;
font-size: 11.5px;
color: var(--muted);
}
/* Angka ringkas di ujung kanan judul — pembanding cepat antar kartu. */
.stat-judul strong {
margin-left: auto;
font-size: 15px;
color: var(--brand);
font-variant-numeric: tabular-nums;
}
/* Kolom isian kecil di dalam tabel telaah standar */
.input-kecil {
width: 100%;
padding: 3px 6px;
text-align: right;
font-variant-numeric: tabular-nums;
}
/* ==================================================================== */
/* Rumus & Parameter */
/* ==================================================================== */
.rumus-blok {
padding: 12px 0;
border-bottom: 1px solid var(--border);
}
.rumus-blok:last-child { border-bottom: 0; }
.rumus-nama {
font-size: 13.5px;
font-weight: 700;
color: var(--text);
margin-bottom: 5px;
}
/* Rumusnya ditulis apa adanya — huruf lebar agar sejajarnya terbaca. */
.rumus-exp {
margin: 0;
padding: 9px 12px;
background: var(--brand-soft);
border-left: 3px solid var(--brand-line);
border-radius: 0 5px 5px 0;
font-family: var(--mono);
font-size: 12.5px;
line-height: 1.65;
color: var(--brand-dark);
white-space: pre-wrap;
overflow-x: auto;
}
.rumus-ket {
margin: 6px 0 0;
font-size: 12px;
color: var(--text-soft);
line-height: 1.55;
}
.param-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
gap: 12px 18px;
margin-top: 12px;
padding: 12px 14px;
background: var(--surface-alt);
border: 1px solid var(--border);
border-radius: 6px;
}
.param label {
display: block;
font-size: 12px;
font-weight: 600;
color: var(--text);
margin-bottom: 4px;
}
.param label .badge { margin-left: 5px; font-size: 9.5px; }
.param-isi { display: flex; align-items: center; gap: 7px; }
.param-isi input {
flex: 1;
min-width: 0;
padding: 5px 8px;
text-align: right;
font-variant-numeric: tabular-nums;
}
.param-satuan { font-size: 11.5px; color: var(--text-soft); white-space: nowrap; }
.param-kaki {
font-size: 10.5px;
color: var(--muted);
margin-top: 3px;
font-variant-numeric: tabular-nums;
}
.param .hint, .param .err { font-size: 11px; margin-top: 3px; display: block; }
.param.has-error input { border-color: var(--bad); }
/* ==================================================================== */
/*
* Tabel ini berkolom 16: identitas, tujuh proses, keputusan QC, dan tiga
* angka turunan. Dengan ukuran biasa lebarnya menembus 1.900 piksel dan
* memaksa pengguna menggulir ke kanan hanya untuk melihat Finishing —
* padahal justru perbandingan antar proses yang ingin dilihat sekilas.
*
* Yang dikecilkan hanya ukuran, bukan isinya: tidak ada kolom yang
* disembunyikan, dan setiap baris tetap satu baris.
*/
/* Lebar kolom diambil dari , bukan dari isinya. Tanpa ini satu
keterangan panjang di salah satu baris melebarkan seluruh kolomnya. */
/* Nama produk dipangkas jadi satu baris; selengkapnya lewat tooltip. */
/* Nilai dan keterangannya disandingkan dalam satu baris, bukan ditumpuk —
menghemat satu baris pada setiap sel dari tujuh kolom proses. */
/* Keterangan sel dipotong bila kepanjangan — tanpa ini satu kalimat seperti
"Tidak dilalui sediaan Sabun cair" melebarkan tujuh kolom sekaligus,
karena seluruh sel tabel memakai white-space: nowrap. */
/* Progress bar ikut menyusut agar kolom No WO tidak melebar. */
/* Kolom aksi cukup satu tombol berikon; No WO sudah menautkan ke detail. */
/* ==================================================================== */
/* Pop-up tindakan proses (Batch Report) */
/* ==================================================================== */
.pilih-tindakan { display: flex; gap: 8px; }
.pilih-tindakan .tindakan-btn { flex: 1; justify-content: center; }
.pilih-tindakan .tindakan-btn.is-aktif {
background: var(--brand);
border-color: var(--brand);
color: #fff;
}
.pilih-proses {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
gap: 8px;
}
.proses-item {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 2px;
padding: 9px 12px;
border: 1px solid var(--border);
border-radius: 6px;
background: var(--surface);
cursor: pointer;
text-align: left;
font: inherit;
}
.proses-item:hover:not(:disabled) { border-color: var(--brand); background: var(--brand-soft); }
.proses-item:disabled { cursor: not-allowed; opacity: .55; }
.proses-item .pi-nama { font-size: 13px; font-weight: 600; color: var(--text); }
.proses-item .pi-ket { font-size: 11px; color: var(--muted); }
/* Warna kiri mengikuti keadaan proses, sama seperti di tabel — supaya
pilihannya langsung terbaca tanpa mengingat-ingat warna sel. */
.proses-item.selesai { border-left: 4px solid #0f6b45; }
.proses-item.kerjakan { border-left: 4px solid #ffd43b; }
.proses-item.menunggu { border-left: 4px solid #8f1d1d; }
.proses-item.lewat,
.proses-item.dilewati { border-left: 4px solid #cbd5e1; }
/* Status Bulk: keputusan dan tombolnya bersanding agar kolomnya tidak
melebar sendiri di antara tujuh kolom proses yang ramping. */
.status-baris {
display: flex;
align-items: center;
gap: 6px;
justify-content: space-between;
}
/* ------------------------------------------------------------------ */
/* Halaman Masuk */
/* ------------------------------------------------------------------ */
body.halaman-masuk {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
background: var(--sidebar);
}
.masuk-kotak {
width: 100%;
max-width: 400px;
background: var(--surface);
border-radius: 14px;
overflow: hidden;
box-shadow: 0 24px 50px -12px rgba(0, 0, 0, .45);
}
/* Kepala kotak memakai navy yang sama dengan sidebar, supaya halaman
masuk terbaca sebagai bagian aplikasi yang sama — bukan halaman asing. */
.masuk-merek {
display: flex;
align-items: center;
gap: 12px;
padding: 20px 24px;
background: var(--brand);
}
.masuk-merek img { width: 40px; height: 40px; flex: 0 0 40px; }
.masuk-merek .mm-nama {
color: #fff;
font-size: 19px;
font-weight: 700;
letter-spacing: -.2px;
}
.masuk-merek .mm-tagline {
color: var(--accent);
font-size: 10.5px;
font-style: italic;
margin-top: 2px;
line-height: 1.3;
}
.masuk-isi { padding: 24px; }
.masuk-isi h1 { font-size: 20px; color: var(--text); }
.masuk-isi .masuk-sub {
margin: 3px 0 18px;
font-size: 12.5px;
color: var(--muted);
}
.masuk-isi .field { margin-bottom: 14px; }
.masuk-tombol { width: 100%; justify-content: center; margin-top: 4px; }
.masuk-bantuan {
margin: 16px 0 0;
font-size: 11.5px;
color: var(--muted);
text-align: center;
line-height: 1.5;
}
/* Ringkasan arti tiap peran pada formulir akun. */
.peran-ket {
margin-top: 18px;
padding: 12px 14px;
background: var(--surface-alt);
border: 1px solid var(--border);
border-radius: var(--radius);
}
.peran-ket .pk-baris {
display: flex;
gap: 10px;
font-size: 12px;
line-height: 1.6;
color: var(--text-soft);
}
.peran-ket .pk-baris strong {
flex: 0 0 118px;
color: var(--brand);
}
/* ------------------------------------------------------------------ */
/* Planner — papan rencana */
/* ------------------------------------------------------------------ */
.papan-rencana td.rencana-sel {
vertical-align: top;
padding: 6px !important;
min-width: 132px;
white-space: normal;
border-left: 1px solid var(--border);
}
/* Tiap rencana jadi satu kartu kecil yang bisa diklik langsung ke
formulirnya — papan ini yang paling sering jadi titik masuk. */
.rc-kartu {
display: block;
padding: 5px 7px;
margin-bottom: 4px;
background: var(--brand-soft);
border: 1px solid var(--brand-line);
border-radius: 5px;
text-decoration: none;
line-height: 1.3;
}
.rc-kartu:last-child { margin-bottom: 0; }
.rc-kartu:hover { background: var(--accent-soft); border-color: var(--accent-line); text-decoration: none; }
.rc-kartu .rc-batch {
display: block;
font-size: 11.5px;
font-weight: 700;
color: var(--brand);
}
.rc-kartu .rc-meta {
display: block;
font-size: 10px;
color: var(--text-soft);
margin-top: 1px;
}
/* Baris susun otomatis: sejajar, dengan keterangan mengalir di sisanya. */
.susun-otomatis {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
gap: 10px 14px;
}
.susun-otomatis .field { margin: 0; }
.susun-otomatis .hint { flex: 1 1 320px; }
/* =====================================================================
Skema Database
===================================================================== */
/* Keterangan database yang sedang dipakai. Dua kolom di layar lebar,
menumpuk di layar sempit — nilainya sering panjang (nama database,
jumlah baris) dan lebih mudah dibaca bertingkat daripada terpotong. */
dl.ringkas {
display: grid;
grid-template-columns: minmax(min(180px, 100%), max-content) 1fr;
gap: 8px 18px;
margin: 0;
font-size: 13.5px;
}
dl.ringkas dt { color: var(--muted); font-weight: 600; }
dl.ringkas dd { margin: 0; }
dl.ringkas dd code {
background: var(--surface-alt);
padding: 2px 7px;
border-radius: 4px;
font-family: var(--mono);
font-size: 12.5px;
}
/* Daftar langkah yang dikerjakan. Bisa puluhan baris, jadi diberi batas
tinggi dengan gulir sendiri supaya tombolnya tidak terdorong jauh. */
ol.log-skema {
margin: 0;
padding-left: 22px;
max-height: 340px;
overflow-y: auto;
font-size: 13px;
line-height: 1.85;
color: var(--text-soft);
}
ol.log-skema code {
background: var(--surface-alt);
padding: 1px 5px;
border-radius: 4px;
font-family: var(--mono);
font-size: 12px;
}
ul.poin {
margin: 0;
padding-left: 20px;
font-size: 13.5px;
line-height: 1.8;
color: var(--text-soft);
}
@media (max-width: 560px) {
dl.ringkas { grid-template-columns: 1fr; gap: 2px 0; }
dl.ringkas dd { margin-bottom: 10px; }
}
/* =====================================================================
Masterlist Produk — nilai yang dihitung, bukan diketik
===================================================================== */
/* Tampil di posisi kotak isian, tetapi sengaja tidak menyerupainya:
tanpa bingkai kotak, latarnya rata dengan kartu. Kotak yang tidak bisa
diketik lebih membingungkan daripada teks biasa. */
.nilai-hitung {
display: flex;
flex-direction: column;
gap: 2px;
padding: 7px 0 2px;
min-height: 38px;
}
.nilai-hitung .nh-angka {
font-family: var(--mono);
font-size: 15px;
font-weight: 700;
color: var(--brand);
line-height: 1.2;
}
.nilai-hitung .nh-asal {
font-size: 11.5px;
color: var(--muted);
line-height: 1.45;
}
.nilai-hitung.kosong .nh-angka { color: var(--muted); font-weight: 600; }
.nilai-hitung.kosong .nh-asal { color: var(--warn, #b5651d); }
/* =====================================================================
Penanda kelengkapan data produk
===================================================================== */
/* Dua keadaan, dua bobot visual yang sengaja tidak setara: yang lengkap
cukup samar karena itu keadaan normal, yang kurang harus menarik mata
karena itulah yang menuntut tindakan. */
.tanda-lengkap,
.tanda-kurang {
display: inline-block;
padding: 2px 8px;
border-radius: 999px;
font-size: 11px;
font-weight: 700;
white-space: nowrap;
cursor: default;
}
.tanda-lengkap {
background: var(--surface-alt);
color: var(--muted);
}
.tanda-kurang {
background: #fdeccd;
color: #8a5300;
}
.tanda-kurang-tautan {
color: #8a5300;
font-weight: 700;
text-decoration: none;
border-bottom: 1px dotted currentColor;
}
.tanda-kurang-tautan:hover { border-bottom-style: solid; }
/* Rincian apa saja yang kurang, di dalam kotak peringatan form. */
ul.kurang-daftar {
margin: 8px 0 0;
padding-left: 18px;
line-height: 1.7;
}
ul.kurang-daftar li { margin-bottom: 2px; }
@media (prefers-color-scheme: dark) {
.tanda-kurang { background: #4a3308; color: #ffd486; }
.tanda-kurang-tautan { color: #ffd486; }
}
/* =====================================================================
Update SO — batang pemenuhan
===================================================================== */
/* Angka persen ditaruh DI DALAM batangnya, bukan di sebelahnya: satu
kolom mengandung dua bacaan sekaligus — kasar lewat panjang batang,
tepat lewat angkanya — tanpa memakan lebar tabel yang sudah padat. */
.bar-so {
position: relative;
display: block;
min-width: 84px;
height: 18px;
border-radius: 4px;
background: var(--surface-alt);
overflow: hidden;
}
.bar-so .bar-isi {
position: absolute;
inset: 0 auto 0 0;
border-radius: 4px;
transition: width .2s ease;
}
.bar-so .bar-isi.ok { background: #1e8e5a; }
.bar-so .bar-isi.sedang { background: #d9a406; }
.bar-so .bar-isi.kurang { background: #c0563a; }
.bar-so .bar-txt {
position: relative;
display: block;
text-align: center;
line-height: 18px;
font-size: 11px;
font-weight: 700;
color: var(--text);
/* Bayangan tipis supaya angkanya tetap terbaca baik di atas bagian
batang yang terisi maupun yang kosong. */
text-shadow: 0 0 3px var(--surface), 0 0 2px var(--surface);
}
@media (prefers-color-scheme: dark) {
.bar-so .bar-isi.ok { background: #2fa86e; }
.bar-so .bar-isi.sedang { background: #b98c00; }
.bar-so .bar-isi.kurang { background: #a9472f; }
}
/* =====================================================================
Pemilih tahun kerja di kepala halaman
===================================================================== */
.pilih-tahun { margin: 0 10px 0 0; }
.pilih-tahun select {
height: 32px;
padding: 0 26px 0 10px;
border-radius: 8px;
border: 1px solid var(--line);
background: var(--surface);
color: var(--text);
font-size: 13px;
font-weight: 700;
font-variant-numeric: tabular-nums;
cursor: pointer;
}
/* Tahun lampau ditandai supaya tidak dikira data hari ini. Tanpa penanda,
layar 2025 dan 2026 terlihat sama persis — dan keputusan yang diambil
dari tahun yang salah tidak akan ketahuan sampai jauh kemudian. */
.pilih-tahun.lampau select {
background: #fdeccd;
border-color: #e0b567;
color: #8a5300;
}
@media (prefers-color-scheme: dark) {
.pilih-tahun.lampau select { background: #4a3308; border-color: #7a5a12; color: #ffd486; }
}
@media (max-width: 640px) {
.pilih-tahun { margin-right: 6px; }
.pilih-tahun select { height: 28px; font-size: 12px; padding: 0 22px 0 8px; }
}
/* Label yang hanya dibaca pembaca layar. Selalu ada di DOM — menghapusnya
membuat kotak pilih tanpa nama bagi yang memakai pembaca layar. */
.visually-hidden {
position: absolute;
width: 1px; height: 1px;
margin: -1px; padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
/* =====================================================================
Pertanyaan "proses selesai?" di form input
===================================================================== */
/* Dibuat mencolok dengan sengaja. Pertanyaan ini menggantikan tombol yang
selalu terlewat — kalau tampilannya sama datar dengan isian lain, ia akan
terlewat juga, hanya saja di tempat yang berbeda. */
.fieldset.penutup { border: 2px solid var(--brand); }
.fieldset.penutup .fieldset-head { color: var(--brand); }
.pilih-selesai {
display: grid;
grid-template-columns: repeat(2, minmax(min(220px, 100%), 1fr));
gap: 10px;
}
.opsi-selesai {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 14px;
border: 2px solid var(--line);
border-radius: 10px;
background: var(--surface);
font-weight: 700;
cursor: pointer;
user-select: none;
}
.opsi-selesai input { width: 18px; height: 18px; margin: 0; accent-color: var(--brand); }
.opsi-selesai.opsi-ya:has(input:checked) { border-color: #1e8e5a; background: #e6f4ec; color: #14613d; }
.opsi-selesai.opsi-belum:has(input:checked) { border-color: #d9a406; background: #fdf3d6; color: #7a5a00; }
.has-error .opsi-selesai { border-color: #c0392b; }
@media (prefers-color-scheme: dark) {
.opsi-selesai.opsi-ya:has(input:checked) { background: #173d2a; color: #9fe0bd; }
.opsi-selesai.opsi-belum:has(input:checked) { background: #41340a; color: #ffd98a; }
} |