/* ============================================================
   Hongsung Inventory - Design System
   Aksesibilitas: semua kombinasi warna teks memenuhi WCAG AA
   (kontras >= 4.5:1 untuk teks normal, >= 3:1 untuk teks besar)
   Status tidak mengandalkan warna saja (selalu ada label teks).
   ============================================================ */
/* Font: Poppins (judul/brand/tombol) - fallback aman jika tanpa internet.
   Pemuatannya SENGAJA tidak lagi memakai @import di sini.

   @import di dalam berkas CSS adalah cara paling lambat memuat font:
   browser harus mengunduh style.css dulu, MEMBACANYA, baru mulai
   meminta font ke internet, lalu font itu menunjuk ke berkas woff2 di
   alamat lain lagi. Empat perjalanan berurutan sebelum halaman bisa
   tampil - dan semuanya lewat internet luar, padahal sistem ini
   dipakai di jaringan pabrik. Bila internetnya lambat atau mati,
   halaman ikut tertahan menunggu.

   Sekarang font dimuat dari includes/header.php secara TIDAK memblokir
   (dan dari server sendiri bila sudah diunduh lewat unduh_font.bat),
   sehingga halaman langsung tampil dengan Segoe UI lalu berganti ke
   Poppins begitu fontnya siap. */

:root {
  /* Identitas PT Hongsung Print: navy + oranye logo + emas */
  --navy-900: #141d36;   /* topbar / panel gelap */
  --navy-800: #1a2440;
  --navy-700: #233158;   /* primer: kontras 12:1 di atas putih */
  --navy-100: #e3e8f4;
  --navy-50:  #eef1f8;

  --orange:      #f0912d; /* oranye logo - untuk aksen/ikon di latar gelap */
  --orange-ink:  #9a4b00; /* oranye teks di latar terang (kontras 4.9:1) */
  --orange-bg:   #fdf1e3;
  --gold:        #d4a94a; /* tombol emas, dipakai dengan teks navy (kontras 8:1) */
  --gold-hover:  #c69a38;

  /* Netral */
  --ink:        #141d36;
  --ink-2:      #33405e;
  --ink-3:      #4a5674;
  --line:       #c6cdda;
  --line-soft:  #e2e7ef;
  --bg:         #eef1f6;
  --surface:    #ffffff;

  /* Status - teks gelap di latar terang (semua >= 5:1) */
  --ok-bg: #dcfce7;   --ok-ink: #14532d;   --ok: #15803d;
  --warn-bg: #fef3c7; --warn-ink: #713f12; --warn: #b45309;
  --err-bg: #fee2e2;  --err-ink: #7f1d1d;  --err: #b91c1c;
  --info-bg: #e3e8f4; --info-ink: #1a2440;

  /* Alias agar kelas lama tetap konsisten */
  --primary-700: var(--navy-700);
  --primary-800: var(--navy-800);
  --primary-900: var(--navy-900);
  --primary-100: var(--navy-100);
  --primary-50:  var(--navy-50);

  --radius: 12px;
  --shadow: 0 1px 2px rgba(20,29,54,.06), 0 4px 14px rgba(20,29,54,.06);
  --sidebar-w: 240px;
  --topbar-h: 58px;
  /* Lebar maksimum area isi. Dibiarkan penuh agar tabel lebar
     (mis. Monitoring PO dengan 26 kolom) memakai seluruh layar.
     Ubah ke angka tetap, mis. 1600px, bila ingin dibatasi lagi. */
  --content-max: none;
  --font-head: 'Poppins', 'Segoe UI', system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { font-size: 16px; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: 'Poppins', "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: .855rem; line-height: 1.6;
}
h1, h2, h3, .brand, .btn, table.data th, label {
  font-family: var(--font-head);
}

/* Fokus keyboard selalu terlihat (usability + aksesibilitas) */
:focus-visible { outline: 3px solid var(--primary-700); outline-offset: 2px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--primary-900); color: #fff; padding: 10px 16px; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

/* ---------- Topbar ---------- */
.topbar {
  position: fixed; inset: 0 0 auto 0; height: var(--topbar-h); z-index: 40;
  background: var(--primary-900); color: #fff;
  display: flex; align-items: center; gap: 14px; padding: 0 16px;
  box-shadow: 0 1px 3px rgba(15,23,42,.25);
}
.brand {
  color: #fff; text-decoration: none; font-weight: 800; letter-spacing: .18em; font-size: .92rem;
  display: inline-flex; align-items: center; gap: 10px; text-transform: uppercase;
}
.brand img { width: 30px; height: 30px; }
.brand em { font-style: normal; font-weight: 300; color: var(--orange); letter-spacing: .06em; }
.userbox { display: flex; align-items: center; gap: 10px; }

/* ---------- Notifikasi (lonceng di topbar) ---------- */
.notif-wrap { position: relative; margin-left: auto; }
.notif-btn { font-size: 1.05rem; color: #fff; position: relative; }
.notif-count {
  position: absolute; top: 0; right: 0; min-width: 17px; height: 17px; padding: 0 4px;
  background: var(--orange, #f59e0b); color: var(--navy-900, #141d36);
  border-radius: 99px; font-size: .66rem; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center;
}
.notif-menu {
  position: absolute; right: 0; top: calc(100% + 8px); width: 320px; max-width: 90vw;
  background: var(--surface, #fff); color: var(--ink, #0f172a);
  border: 1px solid var(--line-soft, #e2e8f0); border-radius: 10px;
  box-shadow: 0 10px 30px rgba(15,23,42,.18); overflow: hidden; z-index: 60;
}
.notif-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 14px; border-bottom: 1px solid var(--line-soft, #e2e7ef); font-size: .85rem;
}
.notif-head a { font-size: .78rem; font-weight: 600; }
.notif-item {
  display: block; padding: 10px 14px; text-decoration: none; color: inherit;
  border-bottom: 1px solid var(--line-soft, #e2e7ef); font-size: .82rem;
}
.notif-item:hover { background: var(--primary-50, #eef1f8); }
.notif-item small { display: block; color: var(--ink-3, #64748b); margin-top: 2px; }
.notif-empty { padding: 18px 14px; text-align: center; color: var(--ink-3, #64748b); font-size: .82rem; }
.user-avatar {
  width: 32px; height: 32px; border-radius: 50%; background: var(--orange); color: var(--navy-900);
  display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: .8rem;
}
.user-name { font-size: .82rem; color: #e2e8f0; }
.icon-btn { background: none; border: 0; cursor: pointer; padding: 8px; border-radius: 8px; }
.icon-btn:hover { background: rgba(255,255,255,.12); }
.menu-toggle { display: none; flex-direction: column; gap: 4px; }
.menu-toggle span { width: 20px; height: 2px; background: #fff; border-radius: 2px; display: block; }

/* ---------- Sidebar: menu & submenu ---------- */
.sidebar {
  position: fixed; top: var(--topbar-h); left: 0; bottom: 0; width: var(--sidebar-w); z-index: 30;
  background: var(--navy-100); border-right: 1px solid var(--line-soft);
  display: flex; flex-direction: column; overflow-y: auto; padding: 10px 0;
}
.nav-list { list-style: none; margin: 0; padding: 0 10px; flex: 1; }
.nav-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 10px 12px; margin: 2px 0; border: 0; border-radius: 8px;
  background: none; color: var(--ink-2); text-decoration: none;
  font: inherit; font-weight: 500; text-align: left; cursor: pointer;
  min-height: 42px; /* target sentuh >= 42px */
}
.nav-item:hover { background: var(--bg); color: var(--ink); }
.nav-item.is-active {
  background: var(--orange-bg); color: var(--orange-ink); font-weight: 600;
  box-shadow: inset 3px 0 0 var(--orange);
}
.nav-item.is-disabled { color: #94a3b8; cursor: default; }
.nav-icon { width: 20px; text-align: center; font-size: 1rem; flex: none; display: inline-flex; align-items: center; justify-content: center; }
.nav-icon img { width: 20px; height: 20px; object-fit: contain; display: block; }
.nav-item.is-disabled .nav-icon img { filter: grayscale(1); opacity: .55; }
.soon {
  margin-left: auto; font-size: .62rem; text-transform: uppercase; letter-spacing: .06em;
  background: var(--line-soft); color: var(--ink-3); padding: 2px 7px; border-radius: 99px;
}
.chev {
  margin-left: auto; width: 8px; height: 8px; flex: none;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); transition: transform .15s;
}
.nav-parent.is-open .chev { transform: rotate(225deg); }
.nav-sub { list-style: none; margin: 0; padding: 0 0 4px 0; }
.nav-subitem {
  display: block; padding: 8px 12px 8px 42px; margin: 1px 0; border-radius: 8px;
  color: var(--ink-3); text-decoration: none; font-size: .84rem; position: relative;
}
.nav-subitem::before {
  content: ''; position: absolute; left: 24px; top: 50%; width: 6px; height: 6px;
  border-radius: 50%; background: var(--line); transform: translateY(-50%);
}
.nav-subitem:hover { background: var(--bg); color: var(--ink); }
.nav-subitem.is-active { color: var(--orange-ink); font-weight: 600; background: var(--orange-bg); }
.nav-subitem.is-active::before { background: var(--orange); }
.sidebar-foot { padding: 12px 20px; font-size: .72rem; color: var(--ink-3); border-top: 1px solid var(--line-soft); }
.nav-backdrop { display: none; }

/* ---------- Konten ---------- */
.content { margin: var(--topbar-h) 0 0 var(--sidebar-w); padding: 24px; max-width: var(--content-max); }
h1 { font-size: 1.3rem; font-weight: 700; margin: 0 0 18px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.card {
  background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius);
  padding: 18px; margin-bottom: 18px; box-shadow: var(--shadow);
}
.toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 14px; }
.toolbar form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ---------- Tombol ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 16px; min-height: 38px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-2);
  font: inherit; font-weight: 600; font-size: .82rem; text-decoration: none; cursor: pointer;
  transition: background .12s, border-color .12s;
}
.btn:hover { background: var(--bg); border-color: var(--ink-3); }
.btn-primary { background: var(--primary-700); border-color: var(--primary-700); color: #fff; }
.btn-primary:hover { background: var(--primary-800); border-color: var(--primary-800); }
.btn-danger { background: var(--surface); border-color: var(--err); color: var(--err); }
.btn-danger:hover { background: var(--err-bg); }
.btn-ghost { background: transparent; border-color: rgba(255,255,255,.35); color: #fff; }
.btn-ghost:hover { background: rgba(255,255,255,.12); border-color: #fff; }
.btn-sm { padding: 5px 11px; min-height: 30px; font-size: .76rem; }

/* ---------- Form ---------- */
label { display: block; font-size: .76rem; font-weight: 600; color: var(--ink-3); margin: 12px 0 5px; }
input, select, textarea {
  width: 100%; padding: 9px 11px; min-height: 38px;
  border: 1px solid var(--line); border-radius: 8px;
  font: inherit; font-size: .85rem; color: var(--ink); background: var(--surface);
}
textarea { min-height: auto; }

/* Kotak centang & radio bukan kolom isian teks.
   Aturan "input" di atas (lebar penuh, tinggi minimum 38px, padding,
   border sendiri) ikut mengenainya, sehingga di seluruh sistem kotak
   centang tampil melar sebesar kotak isian dan mendorong tulisannya ke
   baris berikutnya. Di sini ukurannya dikembalikan sewajarnya dan
   penggambarannya diserahkan kembali ke browser. */
input[type=checkbox], input[type=radio] {
  -webkit-appearance: auto; appearance: auto;
  width: 15px; height: 15px; min-height: 0;
  padding: 0; margin: 0; flex: none;
  border: 0; border-radius: 0; background: none;
  accent-color: var(--primary-700);
  vertical-align: middle; cursor: pointer;
}
input[type=checkbox]:hover, input[type=radio]:hover { border-color: transparent; }
input[type=checkbox]:focus-visible, input[type=radio]:focus-visible {
  outline: 2px solid var(--primary-700); outline-offset: 2px;
}
input[type=checkbox]:focus, input[type=radio]:focus { outline-width: 0; border-color: transparent; }

input:hover, select:hover, textarea:hover { border-color: var(--ink-3); }
input:focus, select:focus, textarea:focus { outline: 3px solid var(--primary-100); border-color: var(--primary-700); }
.toolbar input, .toolbar select { width: auto; }

/* Deretan pilihan bercentang (mesin pada jadwal PM, PIC teknisi, dsb):
   satu baris = satu pilihan, kotak centang sejajar dengan baris pertama
   tulisannya, dan seluruh barisnya bisa diklik. */
.pilihan-list {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 2px 16px;
}
.pilihan-list label.pilihan {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: .82rem; font-weight: 400; color: var(--ink);
  margin: 0; padding: 4px 6px; border-radius: 6px; cursor: pointer;
}
.pilihan-list label.pilihan:hover { background: var(--bg); }
.pilihan-list label.pilihan input { margin-top: 2px; }
.pilihan-list .pilihan-ket { display: block; font-size: .71rem; color: var(--ink-3); }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 0 18px; }
.grid > .kolom-lebar { grid-column: span 2; }
@media (max-width: 560px) { .grid > .kolom-lebar { grid-column: 1 / -1; } }

/* Isian form dibatasi lebarnya walau halaman melebar: deretan isian yang
   terlalu panjang membuat mata jauh melompat antara label dan kolomnya.
   Tabel dan kartu ringkasan tetap memakai seluruh lebar layar. */
form.card > .grid, .card > form > .grid { max-width: 1240px; }
.fieldset-title {
  grid-column: 1 / -1; font-weight: 700; font-size: .82rem; color: var(--primary-800);
  text-transform: uppercase; letter-spacing: .04em;
  border-bottom: 2px solid var(--primary-100); padding-bottom: 7px; margin-top: 22px;
}

/* ---------- Tabel ----------
   .table-wrap adalah KOTAK GULIR, bukan sekadar pembungkus. Tingginya
   dibatasi tinggi layar supaya dua hal ini berlaku di SEMUA modul:

     1. Baris judul tabel menempel di atas waktu isinya digulir ke bawah
        (freeze panes) - nama kolom tidak pernah hilang dari layar.
     2. Bilah gulir mendatarnya selalu berada di dasar kotak yang
        kelihatan. Sebelumnya bilah itu ikut di dasar HALAMAN, jadi
        untuk menggeser tabel ke kanan orang harus menggulung halaman
        sampai paling bawah dulu - persis keluhan di modul QC.

   Tabel pendek tidak terpengaruh: max-height tidak pernah meregangkan,
   hanya membatasi. Halaman yang perlu kotak lebih pendek tinggal
   menimpanya lewat style="max-height:..." seperti sebelumnya. */
.table-wrap {
  overflow: auto;
  max-height: max(340px, calc(100vh - var(--topbar-h) - 190px));
  overscroll-behavior-x: contain;
  border: 1px solid var(--line-soft); border-radius: 8px;
  scrollbar-color: #8b97ad var(--line-soft);   /* Firefox */
}
/* Bilah gulir dibuat lebih tebal dari bawaan Chrome: tabel di sistem ini
   bisa selebar 20+ kolom dan digeser dengan mouse di komputer produksi,
   bilah setipis 6px terlalu sulit ditangkap. */
.table-wrap::-webkit-scrollbar { width: 12px; height: 14px; }
.table-wrap::-webkit-scrollbar-track { background: var(--line-soft); }
.table-wrap::-webkit-scrollbar-thumb {
  background: #8b97ad; border-radius: 99px; border: 3px solid var(--line-soft);
}
.table-wrap::-webkit-scrollbar-thumb:hover { background: var(--ink-3); }
.table-wrap::-webkit-scrollbar-corner { background: var(--line-soft); }

table.data { width: 100%; border-collapse: collapse; background: var(--surface); font-size: .82rem; }
table.data th {
  background: #f8fafc; color: var(--ink-3); font-size: .7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em;
  padding: 10px 12px; border-bottom: 2px solid var(--line-soft); text-align: center; white-space: nowrap;
}
/* Yang menempel HANYA baris judul di puncak tabel. Dulu semua <th>
   dibuat sticky, sehingga <th> yang dipakai sebagai judul BARIS di
   tengah tabel ikut melayang saat digulir. Baris judul kedua (tabel
   berjudul bertingkat seperti grid Daily Entry QC) diberi kelas
   .th-beku beserta jarak atasnya oleh assets/tabel-beku.js. */
table.data > thead th,
table.data > tbody > tr:first-child > th,
table.data th.th-beku { position: sticky; top: 0; z-index: 2; }

/* ATURAN SELURUH MODUL (23 September 2026): judul kolom DAN isiannya
   RATA TENGAH, supaya tidak rancu kolom mana milik judul mana.

   !important di sini disengaja dan hanya di sini: ada lebih dari 300
   style="text-align:..." yang tersebar di ~100 halaman. Tanpa
   !important, setiap halaman itu harus disunting satu per satu dan
   halaman BARU yang lupa aturan ini akan menyimpang lagi. Dengan satu
   aturan ini seluruh tabel.data patuh, termasuk yang ditulis kelak.

   Yang TIDAK terkena: dokumen cetak (SJ, invoice, PKWT, kompensasi)
   memakai kelas tabelnya sendiri (data-cetak, dsb), bukan table.data.

   Pengecualian yang disengaja tulis dengan kelas .kiri / .kanan pada
   th DAN td-nya - jangan dengan style inline, karena itu kalah di sini.

   .num tetap ada: tabular-nums menyamakan lebar tiap digit, sehingga
   angka yang rata tengah pun tetap enak dibandingkan antarbaris. */
table.data th, table.data td { text-align: center !important; }
table.data th.num, table.data td.num { font-variant-numeric: tabular-nums; }
table.data th.kiri,  table.data td.kiri  { text-align: left !important; }
table.data th.kanan, table.data td.kanan { text-align: right !important; }
/* Deretan tombol / badge yang disusun flex di dalam sel tidak mengenal
   text-align - tanpa ini tombolnya tetap menempel kiri sementara isi sel
   lain di tengah. */
table.data td > div[style*="display:flex"],
table.data td > .aksi { justify-content: center; }
/* Awal tiap golongan kolom berpasangan (L|R di grid Daily Entry QC):
   garis tipis di kiri supaya pasangan mana milik judul mana langsung
   terbaca, tanpa harus mengikuti judul golongannya dengan mata. */
table.data th.qc-grup, table.data td.qc-grup { border-left: 1px solid var(--line-soft); }
table.data td.ctr > input { margin-inline: auto; }

/* Kolom kiri yang ikut dibekukan saat tabel digeser ke kanan.
   Jarak kiri tiap kolom dihitung assets/tabel-beku.js (lebar kolom di
   sini tidak tetap), skrip itu pula yang memasang/melepasnya menurut
   lebar layar. Latar wajib buram supaya isi kolom lain tidak menembus. */
table.data th.beku, table.data td.beku { position: sticky; z-index: 1; background: var(--surface); }
/* Sel yang SEKALIGUS judul dan kolom beku (pojok kiri atas tabel) harus
   berada di atas keduanya - ia menempel ke atas sekaligus ke kiri, jadi
   judul kolom lain maupun sel isi lewat di bawahnya. Selektornya ditulis
   selengkap aturan "judul menempel" di atas dengan sengaja: kalau hanya
   ditulis "table.data th.beku", kekhususannya kalah oleh selektor
   tr:first-child di sana dan z-index-nya tidak pernah berlaku - judul
   kolom bergolong (mis. "Reject Material") menimpa judul kolom beku. */
table.data > thead th.beku,
table.data > tbody > tr:first-child > th.beku,
table.data th.th-beku.beku { z-index: 3; background: #f8fafc; }
table.data .beku-akhir { box-shadow: 4px 0 8px -6px rgba(20,29,54,.45); }
table.data td { padding: 10px 12px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
table.data tbody tr:hover td, table.data tr:hover td { background: var(--primary-50); }
table.data a { color: var(--primary-700); text-decoration: none; font-weight: 600; }
table.data a:hover { text-decoration: underline; }

/* Tombol berbentuk link di dalam tabel: pakai warnanya sendiri, bukan warna
   link tabel di atas (specificity 'table.data a' lebih tinggi dari '.btn-*',
   tanpa aturan ini teks tombol primary jadi biru di atas latar biru). */
table.data a.btn         { color: var(--ink-2); }
table.data a.btn-primary { color: #fff; }
table.data a.btn-danger  { color: var(--err); }
table.data a.ico-btn     { color: var(--ink-2); }
table.data a.btn:hover, table.data a.ico-btn:hover { text-decoration: none; }
table.data a.btn-primary:hover { color: #fff; }
table.data a.ico-edit:hover,
table.data a.ico-lihat:hover   { color: var(--info-ink); }
table.data a.ico-ok:hover      { color: var(--ok-ink); }
table.data a.ico-hapus:hover   { color: var(--err); }

/* ---------- Badge status (warna + teks, tidak warna saja) ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 11px; border-radius: 99px; font-size: .72rem; font-weight: 700; white-space: nowrap;
}
.badge::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.badge-Open     { background: var(--info-bg); color: var(--info-ink); }
.badge-Draft    { background: var(--info-bg); color: var(--info-ink); }
.badge-Trial    { background: var(--warn-bg); color: var(--warn-ink); }
.badge-Diajukan { background: var(--warn-bg); color: var(--warn-ink); }
.badge-Approved { background: var(--ok-bg);   color: var(--ok-ink); }
.badge-Rejected { background: var(--err-bg);  color: var(--err-ink); }
.badge-Closed   { background: var(--line-soft); color: var(--ink-2); }
/* Status PO (PRD): Baru -> Diproses PPIC -> Selesai */
.badge-Baru         { background: var(--info-bg); color: var(--info-ink); }
.badge-DiprosesPPIC { background: var(--warn-bg); color: var(--warn-ink); }
.badge-Selesai      { background: var(--ok-bg);   color: var(--ok-ink); }
/* Status SPK & baris (PRD 5.3/5.5) */
.badge-MaterialTerpenuhi { background: var(--info-bg); color: var(--info-ink); }
.badge-ProsesProduksi    { background: var(--warn-bg); color: var(--warn-ink); }
.badge-BelumMulai        { background: var(--line-soft); color: var(--ink-2); }
.badge-Proses            { background: var(--warn-bg); color: var(--warn-ink); }
.badge-Diminta           { background: var(--warn-bg); color: var(--warn-ink); }
.badge-Dikeluarkan       { background: var(--ok-bg);   color: var(--ok-ink); }
/* Arah transaksi warehouse */
.badge-Masuk  { background: var(--ok-bg);  color: var(--ok-ink); }
.badge-Keluar { background: var(--err-bg); color: var(--err-ink); }
/* Status stok Warehouse (PARAMETER STOCK di Excel monitoring) */
.badge-AMAN    { background: var(--ok-bg);    color: var(--ok-ink); }
.badge-RESTOCK { background: var(--err-bg);   color: var(--err-ink); }
.badge-HABIS   { background: var(--line-soft); color: var(--ink-2); }
/* Verifikasi entri QC oleh SPV/Head (migrasi 81). Warna tidak berdiri
   sendiri - teks statusnya selalu ikut tertulis di sebelahnya. */
.badge-Menunggu  { background: var(--warn-bg); color: var(--warn-ink); }
.badge-Disetujui { background: var(--ok-bg);   color: var(--ok-ink); }
.badge-Ditolak   { background: var(--err-bg);  color: var(--err-ink); }
/* Hasil inspeksi QC */
.badge-Lolos         { background: var(--ok-bg);   color: var(--ok-ink); }
.badge-LolosSebagian { background: var(--warn-bg); color: var(--warn-ink); }
.badge-Reject        { background: var(--err-bg);  color: var(--err-ink); }
/* Status delivery (PRD 5.6) */
.badge-SiapKirim        { background: var(--info-bg); color: var(--info-ink); }
.badge-Dikirim          { background: var(--warn-bg); color: var(--warn-ink); }
.badge-DiterimaCustomer { background: var(--ok-bg);   color: var(--ok-ink); }
/* Status Sample Product (Marketing -> R&D) */
.badge-ProsesRD          { background: var(--warn-bg); color: var(--warn-ink); }
.badge-ApprovedCustomer  { background: var(--ok-bg);   color: var(--ok-ink); }
.badge-RejectedCustomer  { background: var(--err-bg);  color: var(--err-ink); }
/* Status Finance - Account Payable (PRD 5.7) */
.badge-Outstanding      { background: var(--info-bg); color: var(--info-ink); }
.badge-Dijadwalkan      { background: var(--warn-bg); color: var(--warn-ink); }
.badge-SebagianDibayar  { background: var(--warn-bg); color: var(--warn-ink); }
.badge-Lunas            { background: var(--ok-bg);   color: var(--ok-ink); }
/* Selisih bayar. Keduanya sengaja MENCOLOK, bukan hijau seperti "Lunas":
   invoice yang nilainya tidak sama dengan yang ditransfer selalu perlu
   ditindaklanjuti - entah menagih sisanya atau memperbaiki invoicenya. */
.badge-LebihBayar       { background: var(--warn-bg); color: var(--warn-ink); }
.badge-KurangBayar      { background: var(--warn-bg); color: var(--warn-ink); }
.badge-Hold             { background: var(--err-bg);  color: var(--err-ink); }
/* Sample Product dibatalkan (migrasi 89) - abu-abu: sudah berhenti, bukan galat */
.badge-Cancel           { background: #e2e8f0; color: #475569; text-decoration: line-through; }
.badge-Batal            { background: var(--line-soft); color: var(--ink-2); }
.badge-Disetujui        { background: var(--info-bg); color: var(--info-ink); }
.badge-Dibayar          { background: var(--ok-bg);   color: var(--ok-ink); }
/* Verifikasi invoice dari Purchasing (alur 3-way match) */
.badge-MenungguVerifikasi { background: var(--warn-bg); color: var(--warn-ink); }
.badge-Ditolak            { background: var(--err-bg);  color: var(--err-ink); }

/* ---------- Bilah tab dalam satu sub menu (config.php: tab_nav) ----------
   Dipakai saat beberapa halaman yang berkaitan digabung menjadi satu entri
   sidebar: PO & Monitoring, Penerimaan & Invoice, AP & Arsip. */
.tabnav {
  display: flex; gap: 4px; flex-wrap: wrap;
  border-bottom: 1px solid var(--line-soft, #e2e7ef);
  margin: -4px 0 16px;
}
.tabnav-item {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 15px; text-decoration: none;
  color: var(--ink, #141d36); opacity: .68; font-size: .88rem; font-weight: 500;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  border-radius: 7px 7px 0 0;
}
.tabnav-item:hover { background: var(--line-soft, #e2e7ef); opacity: 1; }
.tabnav-item.aktif {
  color: var(--orange-ink, #9a4b00); border-bottom-color: var(--orange, #f0912d);
  background: transparent; font-weight: 600; opacity: 1;
}
.tabnav-tanda {
  min-width: 19px; padding: 1px 6px; border-radius: 999px;
  background: var(--warn-bg, #fef3c7); color: var(--warn-ink, #92400e);
  font-size: .72rem; font-weight: 700; text-align: center;
}
.tabnav-item.aktif .tabnav-tanda { background: var(--line-soft, #e2e7ef); color: inherit; }
/* Status Purchasing - PO Pembelian (PRD 5.8) */
.badge-Aktif            { background: var(--info-bg); color: var(--info-ink); }
.badge-DiterimaSebagian { background: var(--warn-bg); color: var(--warn-ink); }
.badge-Barang           { background: var(--line-soft); color: var(--ink-2); }
.badge-Jasa             { background: var(--line-soft); color: var(--ink-2); }

/* ---------- Dropdown yang bisa dicari (assets/select-search.js) ----------
   Tampilannya dibuat sama persis dengan input lain agar tidak terasa
   sebagai elemen asing. Select aslinya disembunyikan tetapi tetap ada
   di DOM sehingga form dan validasi bawaan tidak berubah. */
.ss-wrap { position: relative; display: block; width: 100%; }
.ss-wrap > select {
  position: absolute; opacity: 0; pointer-events: none;
  width: 1px; height: 1px; padding: 0; margin: 0; border: 0;
}
.ss-btn {
  width: 100%; min-height: 38px; padding: 9px 30px 9px 11px;
  border: 1px solid var(--line); border-radius: 8px;
  font: inherit; font-size: .85rem; color: var(--ink);
  background: var(--surface); text-align: left; cursor: pointer;
  display: flex; align-items: center; gap: 6px;
}
.ss-btn:hover:not(:disabled) { border-color: var(--ink-3); }
.ss-btn:disabled { background: var(--bg); color: var(--ink-3); cursor: not-allowed; }
.ss-wrap.is-buka .ss-btn { border-color: var(--primary-700); }
.ss-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-label.ss-kosongkan { color: var(--ink-3); }
.ss-caret {
  position: absolute; right: 11px; top: 50%; width: 8px; height: 8px;
  border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3);
  transform: translateY(-70%) rotate(45deg); pointer-events: none;
}
.ss-wrap.is-buka .ss-caret { transform: translateY(-30%) rotate(-135deg); }

.ss-panel {
  position: absolute; z-index: 60; left: 0; right: 0; top: calc(100% + 4px);
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 10px 26px rgba(15, 23, 42, .14); padding: 6px;
  min-width: 220px; max-width: 420px;
}
.ss-wrap.ss-atas .ss-panel { top: auto; bottom: calc(100% + 4px); }
.ss-cari {
  width: 100%; min-height: 32px; padding: 6px 9px; margin-bottom: 5px;
  border: 1px solid var(--line-soft); border-radius: 6px; font-size: .82rem;
}
.ss-list { list-style: none; margin: 0; padding: 0; max-height: 240px; overflow-y: auto; }
.ss-list:focus { outline: none; }
.ss-item {
  padding: 7px 10px; border-radius: 6px; font-size: .84rem; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ss-item.is-sorot { background: var(--bg); }
.ss-item.is-pilih { font-weight: 600; color: var(--primary-700); }
.ss-item.is-pilih::after { content: ' \2713'; }
.ss-kosong { padding: 10px; font-size: .82rem; color: var(--ink-3); text-align: center; }

/* Di toolbar filter, lebarnya menyesuaikan isi seperti select bawaan */
.toolbar .ss-wrap { width: auto; min-width: 150px; max-width: 260px; }
@media (max-width: 640px) { .toolbar .ss-wrap { width: 100%; max-width: none; } }

/* ---------- Alert ---------- */
.alert {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; border-radius: 8px; margin-bottom: 16px; font-weight: 500;
}
.alert-success { background: var(--ok-bg); color: var(--ok-ink); border: 1px solid #86efac; }
.alert-error   { background: var(--err-bg); color: var(--err-ink); border: 1px solid #fca5a5; }

/* ---------- Tombol aksi berikon (tabel) ---------- */
.aksi { display: inline-flex; gap: 6px; align-items: center; }
.aksi form { display: inline; margin: 0; }
.ico-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0; cursor: pointer;
  border: 1px solid var(--line-soft); border-radius: 8px;
  background: var(--surface); color: var(--ink-2, #475569);
  transition: background .12s, color .12s, border-color .12s;
}
.ico-btn:hover  { background: var(--line-soft); color: var(--ink); }
.ico-edit:hover  { border-color: var(--info-ink); color: var(--info-ink); background: var(--info-bg); }
.ico-lihat:hover { border-color: var(--info-ink); color: var(--info-ink); background: var(--info-bg); }
.ico-ok:hover    { border-color: var(--ok-ink);   color: var(--ok-ink);   background: var(--ok-bg); }
.ico-hapus:hover { border-color: var(--err);      color: var(--err);      background: var(--err-bg); }

/* ---------- Lightbox gambar (klik gambar -> tampil penuh) ---------- */
.zoomable { cursor: zoom-in; }
#lightbox {
  position: fixed; inset: 0; z-index: 999; display: none;
  align-items: center; justify-content: center;
  background: rgba(15, 23, 42, .88); padding: 24px;
}
#lightbox.is-open { display: flex; }
#lightbox img { max-width: 100%; max-height: 100%; border-radius: 10px; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
#lightbox .lb-close {
  position: absolute; top: 16px; right: 20px; width: 40px; height: 40px;
  border: 0; border-radius: 50%; cursor: pointer; font-size: 1.4rem; line-height: 1;
  background: rgba(255,255,255,.9); color: #0f172a;
}
#lightbox .lb-cap {
  position: absolute; bottom: 18px; left: 0; right: 0; text-align: center;
  color: #e2e8f0; font-size: .82rem;
}

/* ---------- Stage R&D ---------- */
.stage-tab { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.stage-tab .btn.is-active { background: var(--info-bg); border-color: var(--info-ink); color: var(--info-ink); font-weight: 600; }

/* ---------- Lain-lain ---------- */
.thumb { width: 46px; height: 46px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line-soft); }
.foto-besar { max-width: 280px; border-radius: var(--radius); border: 1px solid var(--line-soft); }
.dl { display: grid; grid-template-columns: 170px 1fr; gap: 8px 14px; font-size: .85rem; }
.dl dt { color: var(--ink-3); font-weight: 600; } .dl dd { margin: 0; }

/* ---------- Login (split-screen ala HR app) ---------- */
.login-wrap { min-height: 100vh; display: flex; }
.login-hero {
  flex: 1; background: var(--navy-900); color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; padding: 40px; text-align: center;
}
.login-hero img { width: 96px; height: 96px; margin-bottom: 18px; }
.login-hero .wordmark {
  font-family: var(--font-head); font-weight: 800; font-size: 1.6rem;
  letter-spacing: .22em; text-transform: uppercase;
}
.login-hero .company { color: var(--orange); font-weight: 600; font-size: .85rem; }
.login-hero .tagline {
  margin-top: 26px; padding-top: 22px; font-size: .8rem; color: #b9c2d8;
  border-top: 2px solid var(--gold);
}
.login-side {
  flex: 1.2; background: var(--bg);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.login-box {
  width: 100%; max-width: 380px; background: var(--surface);
  border-radius: 16px; padding: 34px; box-shadow: 0 18px 45px rgba(20,29,54,.14);
}
.login-box h1 { margin-bottom: 2px; }
.login-box .hint { color: var(--ink-3); font-size: .78rem; margin: 0 0 14px; }
.login-box .btn-gold {
  width: 100%; margin-top: 20px; background: var(--gold); border-color: var(--gold);
  color: var(--navy-900); font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
}
.login-box .btn-gold:hover { background: var(--gold-hover); border-color: var(--gold-hover); }
.login-box .copyright { text-align: center; font-size: .72rem; color: var(--ink-3); margin: 16px 0 0; }
.pw-field { position: relative; }
.pw-field input { padding-right: 44px; }
.pw-toggle {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  background: none; border: 0; cursor: pointer; padding: 8px; font-size: 1rem; color: var(--ink-3);
}
.err { color: var(--err); font-weight: 600; font-size: .82rem; margin-top: 10px; }
@media (max-width: 760px) {
  .login-hero { display: none; }
}

/* ---------- Responsif (mobile) ---------- */
@media (max-width: 860px) {
  .menu-toggle { display: flex; }
  .user-name { display: none; }
  .sidebar { transform: translateX(-100%); transition: transform .18s ease; box-shadow: none; }
  body.nav-open .sidebar { transform: none; box-shadow: 0 0 40px rgba(15,23,42,.3); }
  body.nav-open .nav-backdrop {
    display: block; position: fixed; inset: var(--topbar-h) 0 0 0;
    background: rgba(15,23,42,.45); z-index: 25;
  }
  .content { margin-left: 0; padding: 14px; }
  .dl { grid-template-columns: 130px 1fr; }
  .btn, input, select { min-height: 42px; } /* target sentuh lebih besar di HP */
  /* iOS Safari otomatis zoom kalau font isian < 16px - bikin form loncat saat discan */
  input, select, textarea { font-size: 16px; }
  .btn-sm { min-height: 34px; }
}

/* ---------- Status & prioritas modul Engineering (pekerjaan teknisi) ----------
   badge_class() membuang karakter non-huruf, sehingga "ON PROGRESS"
   menjadi .badge-ONPROGRESS dan "WAITING REVIEW" menjadi .badge-WAITINGREVIEW.
   Warna tidak berdiri sendiri - labelnya selalu ikut tertulis. */
.badge-NEW            { background: var(--info-bg);  color: var(--info-ink); }
.badge-ASSIGNED       { background: var(--info-bg);  color: var(--info-ink); }
.badge-ONPROGRESS     { background: var(--orange-bg); color: var(--orange-ink); }
.badge-PENDING        { background: var(--warn-bg);  color: var(--warn-ink); }
.badge-WAITINGREVIEW  { background: var(--gold);     color: var(--navy-900); }
.badge-REWORK         { background: var(--err-bg);   color: var(--err-ink); }
.badge-CLOSED         { background: var(--ok-bg);    color: var(--ok-ink); }
.badge-CANCELLED      { background: var(--line-soft); color: var(--ink-2); }
.badge-OVERDUE        { background: var(--err);      color: #fff; }

.badge-CRITICAL { background: var(--err);     color: #fff; }
.badge-HIGH     { background: var(--orange-bg); color: var(--orange-ink); }
.badge-MEDIUM   { background: var(--warn-bg); color: var(--warn-ink); }
.badge-LOW      { background: var(--line-soft); color: var(--ink-2); }

/* Status mesin / aset */
.badge-Aktif     { background: var(--ok-bg);    color: var(--ok-ink); }
.badge-Perbaikan { background: var(--warn-bg);  color: var(--warn-ink); }
.badge-Nonaktif  { background: var(--line-soft); color: var(--ink-2); }

/* ---------- Modul General Affair: kondisi & hasil stok opname ----------
   Warna tidak pernah berdiri sendiri - teks statusnya selalu ikut
   tertulis, jadi tetap terbaca oleh yang sulit membedakan warna. */
.badge-Baik           { background: var(--ok-bg);    color: var(--ok-ink); }
.badge-RusakRingan    { background: var(--warn-bg);  color: var(--warn-ink); }
.badge-RusakBerat     { background: var(--err-bg);   color: var(--err-ink); }
.badge-Dipinjam       { background: var(--info-bg);  color: var(--info-ink); }
.badge-Hilang         { background: var(--err);      color: #fff; }
.badge-Dihapus        { background: var(--line-soft); color: var(--ink-2); }
/* hasil pemeriksaan opname */
.badge-Belum          { background: var(--line-soft); color: var(--ink-2); }
.badge-Ada            { background: var(--ok-bg);    color: var(--ok-ink); }
.badge-TidakDitemukan { background: var(--err-bg);   color: var(--err-ink); }
.badge-PindahLokasi   { background: var(--warn-bg);  color: var(--warn-ink); }
/* status kegiatan opname (Draft/Selesai/Batal sudah ada di atas) */
.badge-Berjalan       { background: var(--orange-bg); color: var(--orange-ink); }

/* ---------- Cetak ----------
   Kotak gulir dibongkar waktu dicetak: tanpa aturan ini, tabel yang di
   layar muat dalam kotak setinggi satu layar akan TERPOTONG di kertas -
   yang tercetak hanya bagian yang kebetulan sedang terlihat. Judul yang
   menempel juga dikembalikan statis supaya tidak tercetak menumpuk. */
@media print {
  .topbar, .sidebar, .nav-backdrop, .skip-link, .toolbar .btn, #lightbox { display: none !important; }
  .content { margin: 0 !important; padding: 0 !important; }
  .table-wrap { max-height: none !important; overflow: visible !important; border: 0; }
  table.data th, table.data td { position: static !important; box-shadow: none !important; }
  .card { box-shadow: none; border: 1px solid #cbd5e1; break-inside: avoid; }
  table.data tr { break-inside: avoid; }
}

/* ---------- Rincian roll di dalam tabel laporan ----------
   Sengaja BUKAN table.data: tabel ini berada di dalam sel tabel lain,
   dan tabel-beku.js memperlakukan setiap table.data sebagai tabel utama
   (judul menempel, ruang gulir) - dua-duanya salah untuk tabel sisipan.
   Aturan rata tengah tetap sama dengan table.data. */
table.data tr.baris-rinci > td { background: var(--bg); padding: 8px 10px 12px; }
table.rinci-roll { width: 100%; border-collapse: collapse; background: var(--surface); font-size: .76rem;
                   border: 1px solid var(--line-soft); border-radius: 6px; }
table.rinci-roll th, table.rinci-roll td { padding: 6px 8px; border-bottom: 1px solid var(--line-soft);
                                           text-align: center !important; white-space: nowrap; }
table.rinci-roll th { background: #f8fafc; color: var(--ink-3); font-size: .66rem; font-weight: 700;
                      text-transform: uppercase; letter-spacing: .04em; }

/* ---------- Hitung mundur logout otomatis (assets/sesi-idle.js) ---------- */
.sesi-sisa {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px;
  border: 1px solid rgba(255,255,255,.25); border-radius: 99px;
  font-size: .74rem; color: #cbd5e1; white-space: nowrap; cursor: help;
}
.sesi-sisa b { font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }
.sesi-sisa.is-hampir { background: var(--warn-bg); border-color: var(--warn); color: var(--warn-ink); }
.sesi-sisa.is-hampir b { color: var(--warn-ink); }
.sesi-modal {
  position: fixed; inset: 0; z-index: 1000; background: rgba(20,29,54,.55);
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.sesi-modal-kotak {
  background: var(--surface); color: var(--ink); border-radius: var(--radius);
  box-shadow: 0 20px 50px rgba(15,23,42,.35); width: 100%; max-width: 380px;
  padding: 22px 22px 18px; text-align: center;
}
.sesi-modal-kotak h2 { margin: 0 0 8px; font-size: 1.05rem; }
.sesi-modal-kotak p { margin: 0; font-size: .85rem; color: var(--ink-2); }
.sesi-modal-waktu {
  font-size: 2.2rem; font-weight: 800; color: var(--warn); margin: 10px 0;
  font-variant-numeric: tabular-nums;
}
.sesi-modal-kotak .sesi-modal-catatan { font-size: .76rem; color: var(--ink-3); }
.sesi-modal-aksi { display: flex; gap: 8px; justify-content: center; margin-top: 16px; flex-wrap: wrap; }
@media print { .sesi-sisa, .sesi-modal { display: none !important; } }
@media (max-width: 860px) { .sesi-sisa > span { display: none; } .sesi-sisa { padding: 3px 7px; } }

/* ------------------------------------------------------------
   Notifikasi masuk tanpa pindah halaman (assets/notif-cek.js,
   30 September 2026). Issue produksi = .penting (merah, tetap
   tampil sampai ditutup).
   ------------------------------------------------------------ */
#notif-toast { position: fixed; top: 70px; right: 16px; z-index: 2000; display: flex; flex-direction: column;
               gap: 8px; max-width: min(380px, calc(100vw - 32px)); }
.notif-toast-item { display: flex; gap: 10px; align-items: flex-start; background: var(--surface, #fff);
                    border: 1px solid var(--line, #c6cdda); border-left: 4px solid var(--navy-700, #233158);
                    border-radius: 10px; padding: 10px 12px; box-shadow: 0 6px 24px rgba(20,29,54,.18);
                    font-size: .84rem; animation: notif-masuk .25s ease-out; }
.notif-toast-item a { flex: 1; color: var(--ink, #141d36); text-decoration: none; font-weight: 600; }
.notif-toast-item.penting { border-left-color: #dc2626; background: #fef2f2; }
.notif-toast-item.penting a { color: #991b1b; }
.notif-toast-tutup { background: none; border: 0; font-size: 1.2rem; line-height: 1; cursor: pointer;
                     color: var(--ink-3, #4a5674); padding: 0 2px; }
@keyframes notif-masuk { from { transform: translateY(-8px); opacity: 0; } to { transform: none; opacity: 1; } }
@media print { #notif-toast { display: none; } }

/* ---------- Revisi transaksi stok (migrasi 101) ----------
   Baris yang salah dicoret & diredupkan, storno bergaris merah muda,
   pengganti bergaris hijau. Keterangan revisi tampil sebagai kotak kecil. */
table.data tr.trx-batal td { color: var(--ink-3); text-decoration: line-through; text-decoration-color: rgba(185,28,28,.55); background: #fbf7f7; }
table.data tr.trx-batal td .trx-rev, table.data tr.trx-batal td a.btn { text-decoration: none; }
table.data tr.trx-storno td { background: #fdf2f2; color: var(--err-ink); }
table.data tr.trx-ganti td { background: #f1fbf4; }
.trx-rev { display: inline-block; width: 100%; box-sizing: border-box; min-width: 230px; max-width: 340px; margin: 0 0 4px; padding: 4px 8px; border-radius: 6px; font-size: .72rem; line-height: 1.35; text-align: left; text-decoration: none; }
.trx-rev-batal  { background: var(--err-bg);  color: var(--err-ink);  border-left: 3px solid var(--err); }
.trx-rev-storno { background: var(--err-bg);  color: var(--err-ink);  border-left: 3px solid var(--err); }
.trx-rev-ganti  { background: var(--ok-bg);   color: var(--ok-ink);   border-left: 3px solid var(--ok); }
.trx-rev a { color: inherit; font-weight: 700; }

/* Jenis PO Marketing (migrasi 103) - kelas dari badge_class('jpo' . jenis_po) */
.badge-jpoMainOrder  { background: #dbeafe; color: #1e3a8a; }
.badge-jpoShortage   { background: #fef3c7; color: #92400e; }
.badge-jpoSample     { background: #ede9fe; color: #5b21b6; }
.badge-jpoFOCReplace { background: #fee2e2; color: #991b1b; }

/* Data warisan departemen sebelumnya - dikunci (8 Oktober 2026) */
input.sel-kunci, select.sel-kunci, textarea.sel-kunci {
  background: var(--bg, #f1f5f9) !important; color: var(--ink-2, #334155);
  cursor: not-allowed; border-style: dashed;
}