@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root{
  /* ===== TEMA TERANG — kontras tinggi, ramah mata (staf senior) ===== */
  --bg:#F3F5F8;             /* abu sangat muda, kurangi silau vs putih murni */
  --panel:#FFFFFF;
  --panel-alt:#EDF1F5;      /* input / hover row */
  --panel-soft:#F6F8FB;     /* strip filter */
  --border:#C7D0DB;
  --border-strong:#93A0AF;
  --text:#161C26;           /* nyaris hitam — ~16:1 di putih */
  --text-muted:#45505F;     /* abu gelap — ~8:1, tetap jelas dibaca */
  --text-faint:#6A7583;     /* placeholder — ~4.7:1 */
  --accent:#E0870F;         /* amber untuk ISIAN tombol (teks gelap di atasnya) */
  --accent-dim:#BE7108;
  --accent-strong:#9A5B00;  /* amber-cokelat untuk TEKS/aktif di latar terang (~5:1) */
  --accent-soft:rgba(224,135,15,.14);
  --success:#1B7A44;
  --danger:#C22F26;
  --info:#1C6FB6;
  --radius:8px;
  --radius-lg:12px;
  --tap:44px;              /* touch target minimum (PPIC pakai tablet di lapangan) */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:28px;
  --shadow-sm:0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.10);
  --shadow-md:0 8px 24px rgba(16,24,40,.14);
  --ring:0 0 0 3px rgba(28,111,182,.40);
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0; background:var(--bg);}
body{
  color:var(--text);
  font-family:'Inter',sans-serif;
  font-size:16px;             /* sedikit lebih besar — ramah mata senior */
  line-height:1.5;
  min-height:100vh;
  -webkit-text-size-adjust:100%;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{
  font-family:'Space Grotesk',sans-serif;
  font-weight:600;
  margin:0 0 4px 0;
  letter-spacing:-0.01em;
  color:var(--text);
}
h3{font-size:18px; line-height:1.25;}
h4{font-size:14px;}

code, .mono, input[type="time"], .cell-mono{
  font-family:'JetBrains Mono',monospace;
  font-feature-settings:"zero" 0;   /* nol POLOS, bukan bergaris — lebih jelas buat operator */
}

/* ===== TOMBOL — sistem konsisten (Similarity) ===== */
button{
  font-family:'Inter',sans-serif;
  cursor:pointer;
  border:1px solid var(--border-strong);
  background:var(--panel-alt);
  color:var(--text);
  border-radius:var(--radius);
  min-height:var(--tap);
  padding:11px 18px;
  font-size:14px;
  font-weight:600;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  transition:border-color .15s ease, background .15s ease, transform .06s ease;
}
button:hover{border-color:var(--accent-dim); background:var(--panel-soft);}
button:active{transform:translateY(1px);}
button:disabled{opacity:.45; cursor:not-allowed; transform:none;}
button.primary{background:var(--accent); color:#1A1305; border-color:var(--accent-strong);}
button.primary:hover{background:var(--accent-dim); border-color:var(--accent-dim);}
button.danger{border-color:var(--danger); color:var(--danger); background:transparent;}
button.danger:hover{background:rgba(240,101,91,.14); border-color:var(--danger);}
button.ghost{background:transparent; border-color:var(--border); color:var(--text-muted); font-weight:500;}
button.ghost:hover{color:var(--text); background:var(--panel-alt);}
/* tombol kecil khusus di dalam sel tabel — tetap nyaman di-tap tapi tidak dominan */
td button, .btn-sm{min-height:38px; padding:8px 12px; font-size:13px; font-weight:500;}

/* ===== FIELD ===== */
input,select,textarea{
  background:var(--panel-alt);
  border:1px solid var(--border-strong);
  color:var(--text);
  border-radius:var(--radius);
  min-height:var(--tap);
  padding:11px 12px;
  font-size:14px;
  font-family:'Inter',sans-serif;
  width:auto;
}
select{cursor:pointer;}
input::placeholder,textarea::placeholder{color:var(--text-faint);}
input:focus,select:focus,textarea:focus,button:focus-visible,[tabindex]:focus-visible{
  outline:none;
  border-color:var(--info);
  box-shadow:var(--ring);
}
input[type="checkbox"],input[type="radio"]{
  min-height:0; width:20px; height:20px; accent-color:var(--accent-strong); cursor:pointer;
}
label{
  display:block;
  font-size:12px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:var(--text-muted);
  margin-bottom:6px;
}

/* ===== LOGIN ===== */
#loginScreen{
  position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 30% 20%, #FFFFFF 0%, #E4E9EF 75%);
  z-index:100; padding:20px;
}
/* Sesi sebelumnya masih tersimpan — layar login tidak boleh sempat berkedip
   saat halaman di-refresh. Kelasnya dipasang skrip kecil di <head>. */
html.sesi-tersimpan #loginScreen{display:none;}

.login-box{
  width:380px; max-width:100%; background:var(--panel); border:1px solid var(--border-strong);
  border-radius:var(--radius-lg); padding:32px; box-shadow:var(--shadow-md);
}
/* Logo perusahaan di layar login. Lebarnya pakai satuan relatif + max-width
   supaya ikut mengecil di HP tanpa perlu breakpoint sendiri. Teks di bawahnya
   dirata-tengah mengikuti logo; input & label tetap rata kiri karena form yang
   rata tengah justru lebih susah dibaca. */
.login-brand{display:flex; justify-content:center; margin-bottom:20px;}
.login-logo{width:200px; max-width:72%; height:auto; display:block;}
.login-box h1{font-size:20px; margin-top:0; text-align:center; letter-spacing:-.01em;}
.login-box p.sub{color:var(--text-muted); margin:6px 0 24px 0; font-size:14px; text-align:center;}

@media (max-width:480px){
  .login-logo{width:170px;}
  .login-box h1{font-size:18px;}
}
.field{margin-bottom:16px;}
.field input,.field select{width:100%;}
#loginError{color:var(--danger); font-size:13px; min-height:16px; margin-top:6px;}
.login-box button{width:100%; margin-top:6px;}

/* ===== APP SHELL ===== */
/* Shell mengisi tinggi layar penuh — area kerja tidak "menggantung" di atas
   dengan ruang kosong besar di bawahnya walau kontennya pendek. */
#app{display:none;}
#app.active{display:flex; flex-direction:column; min-height:100vh;}
#app.active > main{flex:1 0 auto; width:100%;}

.topbar{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 20px; border-bottom:1px solid var(--border); background:var(--panel);
  position:sticky; top:0; z-index:50;
}
.topbar .brand{display:flex; align-items:center; gap:12px; min-width:0;}
.topbar .brand .dot{width:10px;height:10px;border-radius:50%;background:var(--accent); flex:0 0 auto;}
.topbar .brand h1{font-size:16px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.topbar .brand span{color:var(--text-muted); font-size:12px;}
.topbar .who{display:flex; align-items:center; gap:12px; font-size:13px; color:var(--text-muted); flex-wrap:wrap; justify-content:flex-end;}
.topbar .who b{color:var(--text);}

/* Tombol collapse navigasi — kasih area kerja lebih lapang di tablet */
#btnNavToggle{
  min-height:40px; min-width:40px; padding:8px 12px; font-size:16px; line-height:1;
  background:var(--panel-alt); border-color:var(--border-strong);
}
#navCurrentLabel{
  display:none; font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:14px; color:var(--accent-strong);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
body.nav-collapsed #navCurrentLabel{display:inline-block;}
@media (min-width:1025px){ body.nav-collapsed .tabs{display:none;} }

#navBackdrop{display:none;}

/* Item aksi di dalam menu (mis. Keluar) — tampil seperti item dropdown biasa */
.nav-menu-item{
  text-align:left; border:none; border-radius:var(--radius); padding:12px 14px; min-height:var(--tap);
  background:transparent; color:var(--text-muted); font-size:14px; font-weight:600; cursor:pointer; width:100%;
}
.nav-menu-item:hover{background:var(--panel-alt); color:var(--text);}
.nav-logout{color:var(--danger); border-top:1px solid var(--border); margin-top:4px; border-radius:0 0 var(--radius) var(--radius);}
.nav-userbox{display:none;}

.tabs{
  display:flex; align-items:center; gap:6px; padding:8px 16px;
  border-bottom:1px solid var(--border); background:var(--panel);
  flex-wrap:wrap; row-gap:6px;
  /* Ikut nempel di bawah topbar saat halaman digulir. Jarak dari atas
     dihitung dari tinggi topbar yang sebenarnya (--topbar-h diisi app.js),
     karena tingginya berubah kalau judulnya turun ke baris kedua.
     z-index di bawah topbar (50) supaya topbar tetap menimpa saat menempel. */
  position:sticky; top:var(--topbar-h, 56px); z-index:40;
  /* JANGAN pakai overflow di sini — bikin menu dropdown (.tab-dropdown-menu
     yang position:absolute) kepotong. Tab yang tidak muat -> wrap ke baris 2. */
}
.tab-btn{
  background:transparent; border:1px solid transparent; border-bottom:2px solid transparent;
  border-radius:0; min-height:var(--tap); padding:10px 14px; color:var(--text-muted);
  font-size:14px; font-weight:600; white-space:nowrap;
}
.tab-btn:hover{color:var(--text); border-bottom-color:var(--border-strong);}
.tab-btn.active{color:var(--accent-strong); border-bottom-color:var(--accent-strong);}
.tab-btn.tab-btn-top{border-radius:var(--radius); border-bottom:none; padding:9px 16px;}
.tab-btn.tab-btn-top:hover{background:var(--panel-alt); border-color:transparent;}
.tab-btn.tab-btn-top.active{background:var(--accent-soft); color:var(--accent-strong);}

.tab-dropdown{position:relative; flex:0 0 auto;}
/* Main menu (Report / Produksi / Monitoring / ...) — kasih background selaras
   biar kebaca sebagai satu deret menu, bukan teks polos. */
.tab-group-trigger{
  background:var(--panel-soft); border:1px solid var(--border); border-radius:var(--radius); cursor:pointer;
  min-height:var(--tap); padding:9px 16px; color:var(--text-muted); font-size:14px; font-weight:600;
  display:flex; align-items:center; gap:8px; white-space:nowrap;
}
.tab-group-trigger:hover{color:var(--text); background:var(--panel-alt); border-color:var(--border-strong);}
.tab-group-trigger.has-active{color:var(--accent-strong); border-color:var(--accent-dim); background:var(--accent-soft);}
/* Tombol menu utama non-dropdown (Dashboard, Input Lapangan) selaras dg trigger */
.tab-btn.tab-btn-top{background:var(--panel-soft); border:1px solid var(--border);}
.tab-group-trigger .caret{font-size:10px; transition:transform .15s;}
.tab-dropdown.open .tab-group-trigger .caret{transform:rotate(180deg);}
.tab-dropdown.open .tab-group-trigger{background:var(--panel-alt); color:var(--text);}

.tab-dropdown-menu{
  display:none; flex-direction:column; gap:2px;
  position:absolute; top:100%; left:0; margin-top:6px; min-width:220px;
  background:var(--panel); border:1px solid var(--border-strong); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-md); padding:8px; z-index:60;
}
.tab-dropdown.open .tab-dropdown-menu{display:flex;}
.tab-dropdown-menu .tab-btn{
  display:block; width:100%; text-align:left; justify-content:flex-start;
  border:none; border-radius:var(--radius); padding:12px 14px; min-height:var(--tap);
}
.tab-dropdown-menu .tab-btn:hover{background:var(--panel-alt); color:var(--text);}
.tab-dropdown-menu .tab-btn.active{background:var(--accent-soft); color:var(--accent-strong);}

main{padding:24px; max-width:1600px; margin:0 auto;}
.tab-panel{display:none;}
.tab-panel.active{display:block;}

/* ===== CARD / ENCLOSURE (Gestalt) ===== */
.panel{
  background:var(--panel); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:20px; margin-bottom:18px; box-shadow:var(--shadow-sm);
}
.panel-head{
  display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
  margin:0 0 16px 0; padding-bottom:14px; border-bottom:1px solid var(--border);
  flex-wrap:wrap;
}
.panel-head h3{margin:0;}
/* Kartu komponen Master CT yang bisa dibuka-tutup lewat namanya. Saat
   tertutup cuma nama, Qty/material, dan ringkasan prosesnya yang tampil. */
.komp-lipat-aksi{display:flex; gap:8px; justify-content:flex-end; margin-bottom:8px;}
.komp-lipat-aksi button{min-height:34px; padding:6px 12px; font-size:12px;}
.komp-kartu h4[data-role="compTitle"]{cursor:pointer; user-select:none;}
.komp-kartu.tutup, .komp-kartu > .panel-head{cursor:pointer;}
.komp-kartu.tutup:hover{border-color:var(--accent-dim);}
.komp-kartu h4[data-role="compTitle"]::before{content:"\25BE"; display:inline-block; width:1.1em;
  color:var(--text-muted); transition:transform .15s;}
.komp-kartu.tutup h4[data-role="compTitle"]::before{transform:rotate(-90deg);}
.komp-ringkas{display:none; margin-left:10px; font-weight:500; font-size:12px; color:var(--info);}
.komp-kartu.tutup .komp-ringkas{display:inline;}
.komp-kartu.tutup > :not(.panel-head){display:none !important;}
.komp-kartu.tutup > .panel-head{margin-bottom:0; padding-bottom:0; border-bottom:none;}
.komp-kartu.tutup > .panel-head > div:first-child > :not(h4):not([data-role="compMeta"]):not([data-role="compEditForm"]){display:none !important;}
.panel-head p{color:var(--text-muted); font-size:13px; margin:4px 0 0 0; max-width:70ch;}
.panel-head > div:last-child{display:flex; gap:8px; align-items:center; flex-wrap:wrap;}

/* Baris filter/aksi yang dikelompokkan jadi satu blok (Proximity + Enclosure) */
.row{display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end;}
.row .field{margin-bottom:0; flex:1; min-width:170px;}
.filterbar{
  display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end;
  background:var(--panel-soft); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:14px; margin-bottom:16px;
}
.filterbar .field{margin-bottom:0; flex:1; min-width:170px;}
.filterbar > button{align-self:flex-end;}

/* ===== TABEL PRODUKSI/INVENTORY ===== */
.table-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:var(--radius-lg);}
table{width:100%; border-collapse:collapse; font-size:14px;}
thead th{
  position:sticky; top:0; z-index:1; background:var(--panel);
}
th{
  text-align:left; color:var(--text-muted); font-size:11.5px; text-transform:uppercase;
  letter-spacing:.04em; font-weight:700; padding:11px 12px; border-bottom:2px solid var(--border-strong);
  white-space:nowrap;
}
th.sortable{cursor:pointer; user-select:none;}
th.sortable:hover{color:var(--text);}
th.sortable .sort-arrow{display:inline-block; width:12px; font-size:11px; color:var(--accent-strong);}
td{padding:12px 12px; border-bottom:1px solid var(--border); vertical-align:middle;}
tbody tr:nth-child(even) td{background:rgba(16,24,40,.028);}
tbody tr:hover td{background:var(--accent-soft);}
.cell-mono{font-size:13px;}

/* ===== BADGE / STATUS (kontras dinaikkan) ===== */
.badge{
  display:inline-block; padding:3px 10px; border-radius:99px; font-size:12px; font-weight:700;
  background:var(--panel-alt); color:var(--text-muted); border:1px solid var(--border-strong);
}
.badge.warn{background:rgba(224,135,15,.16); color:var(--accent-strong); border-color:rgba(224,135,15,.35);}
.badge.ok{background:rgba(27,122,68,.14); color:var(--success); border-color:rgba(27,122,68,.32);}
.badge.err{background:rgba(194,47,38,.12); color:var(--danger); border-color:rgba(194,47,38,.32);}

.empty{
  color:var(--text-muted); font-size:14px; padding:28px; text-align:center;
  border:1px dashed var(--border-strong); border-radius:var(--radius-lg);
}

/* Capacity bar - signature element */
.capbar{
  height:12px; border-radius:99px; background:var(--panel-alt); overflow:hidden;
  border:1px solid var(--border-strong); display:flex; min-width:90px;
}
.capbar .fill{height:100%; background:linear-gradient(90deg,var(--accent-dim),var(--accent));}
.capbar-row{display:flex; align-items:center; gap:10px;}
.capbar-label{font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--text-muted); min-width:74px; text-align:right;}

/* Board (drag & drop) */
.board-cols{display:flex; gap:14px; overflow-x:auto; padding-bottom:10px; -webkit-overflow-scrolling:touch;}
.board-col{
  flex:0 0 280px; background:var(--panel-alt); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:12px; min-height:200px;
}
.board-col h4{font-size:14px; display:flex; justify-content:space-between; align-items:center;}
.board-col h4 .cnt{color:var(--text-muted); font-weight:400; font-size:12px;}
.board-col.dragover{border-color:var(--accent-strong); background:var(--accent-soft);}
.gantt-track-col.dragover{background:rgba(242,169,59,.15) !important;}

.job-card{
  background:var(--panel); border:1px solid var(--border-strong); border-radius:var(--radius);
  padding:11px 12px; margin-bottom:8px; cursor:grab; font-size:13px;
}
.job-card:active{cursor:grabbing;}
.job-card.override{border-left:3px solid var(--accent);}
.job-card .jc-top{display:flex; justify-content:space-between; font-family:'JetBrains Mono',monospace; color:var(--text-muted); font-size:12px;}
.job-card .jc-comp{font-weight:600; margin:4px 0;}
.job-card .jc-time{color:var(--text-muted); font-size:12px; font-family:'JetBrains Mono',monospace;}

/* ===== KPI / RINGKASAN ===== */
.dash-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:14px;}
.dash-card{background:var(--panel); border:1px solid var(--border); border-radius:var(--radius-lg); padding:18px; box-shadow:var(--shadow-sm);}
.dash-card .line-name{font-size:16px; font-weight:600; margin-bottom:12px;}
.dash-card .stat-row{display:flex; justify-content:space-between; font-size:13px; color:var(--text-muted); margin-bottom:6px;}
.dash-card .stat-row b{color:var(--text); font-family:'JetBrains Mono',monospace; font-size:14px;}

.toast{
  position:fixed; bottom:20px; right:20px; background:var(--panel); border:1px solid var(--border-strong);
  border-left:4px solid var(--info); padding:14px 18px; border-radius:var(--radius-lg); font-size:14px;
  max-width:360px; z-index:200; box-shadow:var(--shadow-md);
}
.toast.error{border-left-color:var(--danger);}
.toast.success{border-left-color:var(--success);}

.missing-ct-list{list-style:none; padding:0; margin:8px 0 0 0;}
.missing-ct-list li{padding:8px 0; border-bottom:1px solid var(--border); font-size:13px;}

.two-col{display:grid; grid-template-columns:1.1fr .9fr; gap:18px;}

.mode-btn{background:var(--panel-alt); color:var(--text-muted);}
.mode-btn.active{background:var(--accent); color:#1A1305; border-color:var(--accent-strong); font-weight:700;}
.item-search-result{
  border:1px solid var(--border-strong); border-radius:var(--radius); padding:12px 14px; margin-bottom:6px;
  cursor:pointer; font-size:13px; background:var(--panel-alt); min-height:var(--tap);
  display:flex; align-items:center;
}
.item-search-result:hover{border-color:var(--accent-strong); background:var(--panel-soft);}
.item-search-result b{font-family:'JetBrains Mono',monospace;}

/* Gantt Chart */
.gantt-wrap{display:flex; flex-direction:column; min-width:max-content;}
.gantt-header-row{display:flex; position:sticky; top:0; background:var(--panel); z-index:2; border-bottom:1px solid var(--border-strong);}
.gantt-row-label-col{
  flex:0 0 220px; padding:10px 12px; font-size:11.5px; font-weight:700; color:var(--text-muted);
  text-transform:uppercase; letter-spacing:.03em; position:sticky; left:0; background:var(--panel); z-index:3;
  border-right:1px solid var(--border-strong);
}
.gantt-day-col{
  flex:0 0 92px; padding:8px 4px; font-size:12px; color:var(--text-muted); text-align:center;
  border-right:1px solid var(--border);
}
.gantt-day-col.today{color:var(--accent-strong); font-weight:700;}
.gantt-day-col.holiday{background:rgba(240,101,91,.14); color:var(--danger);}
.gantt-track-col.holiday{background:rgba(240,101,91,.06);}
.gantt-row{display:flex; border-bottom:1px solid var(--border);}
.gantt-row-label{
  flex:0 0 220px; padding:10px 12px; font-size:13px; display:flex; align-items:center;
  position:sticky; left:0; background:var(--panel-alt); border-right:1px solid var(--border-strong);
}
.gantt-row-track{position:relative; display:flex; flex:1;}
.gantt-track-col{flex:0 0 92px; border-right:1px solid var(--border); background:var(--bg);}
.gantt-track-col.today{background:rgba(242,169,59,.06);}
.gantt-bar{
  position:absolute; border-radius:6px; overflow:hidden;
  cursor:pointer; box-shadow:0 1px 4px rgba(16,24,40,.22);
  transition:box-shadow .15s ease, transform .15s ease;
}
.gantt-bar:hover{box-shadow:0 4px 12px rgba(16,24,40,.28); transform:translateY(-1px);}
.gantt-bar-progress{
  position:absolute; top:0; left:0; height:100%; background:rgba(0,0,0,.35);
  border-right:2px solid rgba(0,0,0,.5); z-index:1;
}
.gantt-bar-text{
  position:relative; z-index:2; padding:4px 7px; font-size:11px; color:#1A1305; font-weight:700;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; width:100%; box-sizing:border-box;
}
.gantt-bar .gb-sub{font-weight:400; opacity:.9; font-size:10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.gantt-empty{padding:24px; text-align:center; color:var(--text-muted); font-size:14px;}

/* Gantt Harian (per jam) — kolom lebih sempit */
.gantt-day-col.hour, .gantt-track-col.hour{flex-basis:56px;}
.gantt-bar.hour-bar{top:8px; height:36px;}

/* Kalender grid ala Google Calendar */
.cal-nav{display:flex; align-items:center; gap:10px;}
.cal-nav button{padding:9px 14px;}
.cal-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:1px; background:var(--border-strong); border:1px solid var(--border-strong); border-radius:var(--radius-lg); overflow:hidden;}
.cal-dow{background:var(--panel-alt); padding:10px; text-align:center; font-size:11.5px; text-transform:uppercase; color:var(--text-muted); font-weight:700;}
.cal-cell{
  background:var(--panel); min-height:96px; padding:8px; position:relative; cursor:pointer;
  display:flex; flex-direction:column; gap:4px; transition:background .15s ease;
}
.cal-cell:hover{background:var(--panel-alt);}
.cal-cell.other-month{opacity:.35;}
.cal-cell.is-holiday{background:rgba(240,101,91,.10);}
.cal-cell.is-today{outline:2px solid var(--accent); outline-offset:-2px;}
.cal-cell .cal-daynum{font-family:'JetBrains Mono',monospace; font-size:14px; font-weight:700;}
.cal-cell .cal-libur-label{font-size:11px; color:var(--danger); line-height:1.3;}
.cal-dots{display:flex; gap:3px; flex-wrap:wrap; margin-top:auto;}
.cal-dot{width:8px; height:8px; border-radius:50%;}
#calLegend{display:flex; gap:14px; flex-wrap:wrap; align-items:center; font-size:12px; color:var(--text-muted);}
#calLegend .legend-item{display:flex; align-items:center; gap:6px;}

/* Banner "database lambat" */
#dbSlowBanner{font-weight:600;}

/* ============================================================
   RESPONSIVE — target utama: TABLET PPIC (lanskap & potret)
   ============================================================ */

/* Tablet lanskap (± iPad 1024–1366) — manfaatkan lebar penuh */
@media (max-width:1366px){
  main{max-width:100%; padding:20px 22px;}
}

/* Tablet potret & lanskap kecil */
@media (max-width:1024px){
  body{font-size:17px;}                 /* teks lebih besar buat dibaca sambil berdiri / mata senior */
  h3{font-size:20px;}
  main{padding:16px;}
  .panel{padding:16px; border-radius:var(--radius);}
  .two-col{grid-template-columns:1fr; gap:14px;}
  table{font-size:14px;}
  th,td{padding:12px 12px;}              /* baris lebih tinggi → gampang di-tap */
  .dash-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));}
  .filterbar .field, .row .field{flex-basis:calc(50% - 6px);}   /* 2 kolom filter */

  /* ===== HEADER MINIMALIS (1 baris) ===== */
  .topbar{padding:8px 12px; gap:8px; flex-wrap:nowrap;}
  .topbar .brand{gap:8px; flex:1; min-width:0;}
  .topbar .brand-txt, .topbar .brand .dot{display:none;}
  .topbar .who{display:none;}
  #navCurrentLabel{display:block; flex:1; font-size:15px;}
  #btnNavToggle{min-height:38px; min-width:38px; padding:6px 10px;}

  /* ===== NAV = DRAWER geser dari kiri ===== */
  #navBackdrop{
    position:fixed; inset:0; background:rgba(0,0,0,.42); z-index:190;
    opacity:0; pointer-events:none; transition:opacity .2s;
  }
  body.nav-open #navBackdrop{display:block; opacity:1; pointer-events:auto;}

  .tabs{
    display:flex !important; position:fixed; top:0; left:0; bottom:0;
    width:min(84vw, 310px); flex-direction:column; align-items:stretch; flex-wrap:nowrap;
    gap:2px; padding:14px 10px 24px; row-gap:2px;
    background:var(--panel); border-right:1px solid var(--border-strong); box-shadow:var(--shadow-md);
    overflow-y:auto; -webkit-overflow-scrolling:touch; z-index:200;
    transform:translateX(-102%); transition:transform .22s ease;
  }
  body.nav-open .tabs{transform:translateX(0);}

  .tabs .tab-btn, .tabs .tab-btn-top{
    width:100%; text-align:left; border-radius:var(--radius); border:none; border-bottom:none;
    padding:13px 14px; font-size:15px;
  }
  .tabs .tab-btn.active, .tabs .tab-btn-top.active{background:var(--accent-soft); color:var(--accent-strong);}

  .tab-dropdown{position:static; width:100%;}

  /* Dulu grup dipakai sebagai LABEL seksi dan semua isinya digelar sekaligus —
     satu drawer jadi berisi 38 tombol dan orang harus menggulir jauh untuk
     menemukan satu menu. Sekarang grupnya jadi tombol lagi: tertutup dulu,
     dibuka kalau diketuk. */
  .tab-group-trigger{
    width:100%; justify-content:space-between; border-radius:var(--radius);
    padding:13px 14px; font-size:14px; font-weight:600; color:var(--text);
    background:transparent; border:none; pointer-events:auto;
  }
  .tab-group-trigger:active{background:var(--panel-alt);}
  .tab-group-trigger.has-active{color:var(--accent-strong);}
  .tab-group-trigger .caret{
    display:inline-block; font-size:12px; color:var(--text-muted);
    transition:transform .18s ease;
  }
  .tab-dropdown.open .tab-group-trigger .caret{transform:rotate(180deg);}

  .tab-dropdown-menu{
    display:none !important; position:static; flex-direction:column; gap:2px;
    margin:0; padding:0 0 6px 10px; min-width:0; max-height:none; overflow:visible;
    background:transparent; border:none; box-shadow:none;
  }
  .tab-dropdown.open .tab-dropdown-menu{display:flex !important;}
  .tab-dropdown-menu .tab-btn{padding:12px 14px; font-size:14px;}

  .nav-userbox{
    display:flex; align-items:center; flex-wrap:wrap; gap:6px;
    padding:8px 14px 12px; margin-bottom:4px; border-bottom:1px solid var(--border);
    font-weight:700; font-size:14px;
  }
  .nav-userbox .nav-ver{font-weight:400; font-size:11px; color:var(--text-muted);}
  .nav-logout{margin-top:8px; border-top:1px solid var(--border); border-radius:0;}
}

/* Portrait sempit / HP besar */
@media (max-width:768px){
  main{padding:12px;}
  .panel{padding:14px; margin-bottom:14px; overflow-x:hidden;}
  .panel-head{margin-bottom:12px; padding-bottom:12px;}
  /* header & nav (drawer) diatur di blok @media max-width:1024px */

  #floatingGenerateBar{left:8px; right:8px; transform:none; flex-wrap:wrap; justify-content:center; text-align:center;}

  .row .field, .filterbar .field{min-width:0; flex-basis:100%;}
  .filterbar{padding:12px;}

  /* Tabel lebar di-scroll horizontal per panel, bukan maksa reflow */
  .panel{overflow-x:auto;}
  table{min-width:600px;}

  .two-col{grid-template-columns:1fr; gap:12px;}
  .board-col{flex-basis:82vw;}

  /* Modal/overlay full-width di layar kecil */
  .panel[style*="width:380px"], .panel[style*="width:400px"], .panel[style*="width:420px"],
  .panel[style*="width:440px"], .panel[style*="width:460px"], .panel[style*="width:480px"],
  .panel[style*="width:600px"]{width:100% !important;}
}

@media (max-width:480px){
  h3{font-size:17px;}
  .tab-btn-top, .tab-group-trigger{font-size:13px;}
  .panel-head{flex-direction:column;}
  .panel-head > div:last-child{width:100%;}
  .panel-head > div:last-child button{flex:1;}
}

/* Perangkat sentuh murni: perbesar semua target interaktif */
@media (pointer:coarse){
  button, .tab-btn, .tab-group-trigger, input, select{min-height:46px;}
  td button, .btn-sm{min-height:40px;}
  .cal-cell{min-height:104px;}

  /* Checkbox & radio SENGAJA dikecualikan dari min-height di atas: aturan itu
     cuma bikin kotaknya lonjong, bukan lebih gampang di-tap. Ukuran bawaannya
     13x20px — jauh di bawah batas nyaman jempol. Dibesarkan jadi 24px, lalu
     area di sekelilingnya dikasih padding biar meleset-nya berkurang. Paling
     kerasa di tab Generate Massal yang bisa memuat >1500 checkbox. */
  /* !important DIPERLUKAN di sini: checkbox di-render dari JS dengan
     inline style width:auto (penangkal .field input{width:100%}), dan inline
     style mengalahkan stylesheet biasa. Tanpa ini lebarnya balik ke 13px
     bawaan browser walau tingginya sudah ikut. */
  input[type="checkbox"], input[type="radio"]{
    min-height:0; width:24px !important; height:24px !important; flex:0 0 auto;
    accent-color:var(--accent-strong); cursor:pointer;
  }
  td:has(> input[type="checkbox"]), th:has(> input[type="checkbox"]),
  td:has(> input[type="radio"]),    th:has(> input[type="radio"]){padding:10px 12px;}
  label:has(> input[type="checkbox"]), label:has(> input[type="radio"]){
    display:inline-flex; align-items:center; gap:8px; min-height:44px;
  }

  /* iOS Safari otomatis memperbesar SELURUH halaman begitu user menyentuh
     input yang font-size-nya di bawah 16px — dan halaman tidak balik sendiri,
     user harus pinch-zoom manual. Disamakan 16px supaya tidak terpicu.
     Hanya berlaku di perangkat sentuh; tampilan desktop tidak berubah. */
  /* !important juga perlu: sebagian input punya inline font-size 11-15px. */
  input, select, textarea{font-size:16px !important;}
}


/* ===== ASISTEN AI (chatbot) ===== */
/* Tombol berbentuk pil: ikon + tulisan. Lingkaran polos bikin orang harus
   menebak isinya; tulisan menghilangkan tebakan itu sekali lihat. */
.chat-fab{
  position:fixed; right:20px; bottom:20px; z-index:150;
  display:flex; align-items:center; gap:9px;
  height:52px; min-height:52px; padding:0 20px 0 17px; border:0; border-radius:999px;
  background:var(--accent-strong); color:#fff; line-height:1; cursor:pointer;
  box-shadow:0 8px 24px rgba(0,0,0,.28); transition:transform .12s ease, box-shadow .12s ease;
}
.chat-fab-ic{font-size:19px;}
.chat-fab-tx{font-size:14px; font-weight:700; white-space:nowrap;}
.chat-fab:hover{transform:translateY(-2px); box-shadow:0 12px 30px rgba(0,0,0,.32);}
.chat-fab:active{transform:scale(.95);}
.chat-fab[hidden]{display:none !important;}

.chat-panel{
  position:fixed; right:20px; bottom:20px; z-index:160;
  width:400px; max-width:calc(100vw - 40px); height:min(620px, calc(100vh - 40px));
  display:flex; flex-direction:column; overflow:hidden;
  background:var(--panel); border:1px solid var(--border-strong);
  border-radius:var(--radius-lg); box-shadow:0 18px 50px rgba(0,0,0,.3);
}
.chat-panel[hidden]{display:none !important;}

/* Diperkecil: tinggal batang judulnya, percakapan tetap utuh di belakang.
   Beda dengan tombol tutup yang menyembunyikan panel sama sekali — kadang
   orang cuma perlu melihat tabel di belakangnya sebentar tanpa kehilangan
   tempatnya di percakapan. */
.chat-panel.is-min{height:auto;}
.chat-panel.is-min .chat-body,
.chat-panel.is-min .chat-foot{display:none;}

.chat-head{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:12px 14px; border-bottom:1px solid var(--border); flex:0 0 auto;
}
.chat-title strong{display:block; font-size:15px;}
.chat-sub{font-size:11px; color:var(--text-muted);}
.chat-x{border:0; background:transparent; color:var(--text-muted); font-size:15px;
  cursor:pointer; padding:6px 8px; border-radius:8px; min-height:0;}
.chat-x:hover{background:var(--panel-alt); color:var(--text);}

.chat-act{display:flex; align-items:center; gap:2px;}

/* Daftar percakapan lama — menimpa isi panel, bukan jendela baru, supaya di
   HP tidak perlu berpindah layar. */
.chat-riwayat{flex:1 1 auto; overflow-y:auto; padding:10px;}
.chat-riwayat h4{margin:4px 6px 8px; font-size:12px; text-transform:uppercase;
  letter-spacing:.06em; color:var(--text-muted);}
.chat-riwayat-item{
  display:block; width:100%; text-align:left; border:1px solid var(--border);
  background:var(--panel); border-radius:10px; padding:10px 12px; margin-bottom:6px;
  cursor:pointer; color:var(--text); min-height:0;
}
.chat-riwayat-item:hover{background:var(--accent-soft); border-color:var(--accent-strong);}
.chat-riwayat-item b{display:block; font-size:13px; font-weight:600; line-height:1.35;}
.chat-riwayat-item span{font-size:11px; color:var(--text-muted);}
.chat-riwayat-kosong{text-align:center; color:var(--text-muted); font-size:13px; padding:24px 12px;}

.chat-body{flex:1 1 auto; overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:10px;}
.chat-msg{max-width:88%; padding:10px 12px; border-radius:14px; font-size:14px; line-height:1.5; white-space:pre-wrap; word-wrap:break-word;}
.chat-msg.user{align-self:flex-end; background:var(--accent-soft); color:var(--accent-strong); border-bottom-right-radius:4px;}
.chat-msg.bot{align-self:flex-start; background:var(--panel-alt); border-bottom-left-radius:4px;}
.chat-msg.err{align-self:flex-start; background:rgba(220,60,60,.1); color:var(--danger);}
/* Tabel dalam gelembung chat. Panel cuma ~400px, jadi tabel lebar digeser
   sendiri di dalam wadahnya — bukan melebarkan gelembungnya. */
.chat-tabel{overflow-x:auto; margin:8px -4px 2px; -webkit-overflow-scrolling:touch;}
/* max-content, BUKAN 100%: dengan 100% browser memaksa tabel muat di lebar
   panel lalu menggencet kolom terpanjang sampai satu huruf per baris. Lebih
   baik tabelnya digeser horizontal daripada tidak terbaca. */
.chat-msg table{font-size:12px; border-collapse:collapse; min-width:max-content;}
.chat-msg th,.chat-msg td{padding:5px 8px; text-align:left; vertical-align:top;
  border-bottom:1px solid var(--border); white-space:normal; max-width:230px;}
.chat-msg th{font-weight:700; color:var(--text-muted); font-size:11px;
  text-transform:uppercase; letter-spacing:.03em; white-space:nowrap;}
.chat-msg tbody tr:last-child td{border-bottom:0;}
.chat-msg td:first-child{white-space:nowrap; font-family:'JetBrains Mono',monospace; font-size:11px;}

/* Jejak tool: ditampilkan supaya user tahu angkanya diambil dari mana —
   bukan dikarang model. Ini bagian dari rasa percaya, bukan hiasan. */
.chat-trace{align-self:flex-start; font-size:11px; color:var(--text-muted); padding:0 4px; line-height:1.6;}
.chat-trace code{font-size:11px; background:var(--panel-alt); padding:1px 5px; border-radius:5px;}

/* Gelembung "sedang mengetik" — bentuknya sengaja sama persis dengan
   gelembung balasan bot, jadi begitu jawaban datang tidak ada lompatan
   posisi: titik-titiknya seolah berubah jadi teks di tempat yang sama. */
.chat-unduh{align-self:flex-start; display:flex; align-items:center; gap:9px;
  flex-wrap:wrap; padding:2px 4px;}
.chat-unduh-btn{border:1px solid var(--accent-strong); background:var(--accent-soft);
  color:var(--accent-strong); border-radius:10px; padding:8px 14px; font-size:13px;
  font-weight:700; cursor:pointer; min-height:0; white-space:nowrap;}
.chat-unduh-btn:hover:not(:disabled){background:var(--accent-strong); color:#fff;}
.chat-unduh-btn:disabled{opacity:.65; cursor:default;}
.chat-unduh span{font-size:11px; color:var(--text-muted);}

.chat-typing{
  align-self:flex-start; display:flex; align-items:center; gap:5px;
  padding:13px 14px; border-radius:14px; border-bottom-left-radius:4px;
  background:var(--panel-alt); width:fit-content;
}
.chat-typing span{
  width:8px; height:8px; border-radius:50%; background:var(--text-muted);
  animation:chatTyping 1.3s infinite ease-in-out;
}
.chat-typing span:nth-child(2){animation-delay:.18s;}
.chat-typing span:nth-child(3){animation-delay:.36s;}
@keyframes chatTyping{
  0%,60%,100%{transform:translateY(0); opacity:.35;}
  30%{transform:translateY(-5px); opacity:1;}
}
/* Hormati setelan sistem untuk pengurangan animasi: titiknya tetap ada,
   cuma berkedip halus tanpa memantul. */
@media (prefers-reduced-motion: reduce){
  .chat-typing span{animation:chatTypingFade 1.3s infinite ease-in-out;}
  @keyframes chatTypingFade{0%,60%,100%{opacity:.35;}30%{opacity:1;}}
}

.chat-empty{margin:auto; text-align:center; color:var(--text-muted); font-size:13px; line-height:1.7; padding:16px;}
.chat-chip{display:inline-block; margin:4px 3px; padding:7px 11px; border:1px solid var(--border);
  border-radius:999px; font-size:12px; cursor:pointer; background:var(--panel); color:var(--text);}
.chat-chip:hover{background:var(--accent-soft); border-color:var(--accent-strong); color:var(--accent-strong);}

.chat-foot{display:flex; gap:8px; padding:10px; border-top:1px solid var(--border); flex:0 0 auto; align-items:flex-end;}
.chat-foot textarea{
  flex:1 1 auto; resize:none; max-height:110px; min-height:42px; padding:10px 12px;
  border:1px solid var(--border); border-radius:12px; background:var(--panel-alt);
  color:var(--text); font-family:inherit; font-size:14px; line-height:1.4;
}
.chat-send{flex:0 0 auto; width:42px; min-height:42px; padding:0; border-radius:12px; font-size:15px;}

/* Di HP panel jadi layar penuh — ruang 400px melayang tidak masuk akal di 375px */
@media (max-width:600px){
  .chat-panel{right:0; bottom:0; width:100vw; max-width:100vw; height:100dvh; border-radius:0; border:0;}
  /* Di HP panel penuh layar; kalau diperkecil dia menempel di bawah sebagai
     batang tipis, bukan tetap setinggi layar. */
  .chat-panel.is-min{height:auto;}
  .chat-fab{right:14px; bottom:14px; height:48px; min-height:48px; padding:0 16px 0 14px;}
  .chat-fab-tx{font-size:13px;}
  .chat-msg{max-width:92%;}
}

/* ===== PAGINASI TABEL ===== */
.pager{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap;
  gap:10px; margin-top:12px; padding-top:12px; border-top:1px solid var(--border);
}
.pager:empty{display:none;}
.pager-info{font-size:13px; color:var(--text-muted);}
.pager-btns{display:flex; align-items:center; gap:6px; flex-wrap:wrap;}
.pager-btns button{padding:8px 12px; font-size:13px;}
.pager-btns button:disabled{opacity:.4; cursor:not-allowed;}
.pager-now{font-size:13px; font-weight:700; padding:0 6px; white-space:nowrap;}

/* jumlah SPK terpilih, nempel di tombol Generate */
.sel-count{
  display:inline-flex; align-items:center; justify-content:center; min-width:20px;
  margin-left:6px; padding:1px 6px; border-radius:999px;
  background:rgba(0,0,0,.22); font-size:12px; font-weight:800;
}

/* Di layar sempit paginasi ditumpuk & tombolnya melebar biar gampang di-tap */
@media (max-width:768px){
  .pager{flex-direction:column; align-items:stretch;}
  .pager-info{text-align:center;}
  .pager-btns{justify-content:center;}
  .pager-btns button{flex:1 1 auto; min-width:0;}
}

/* ===== STOPWATCH POPUP — bantu hitung Cycle Time ===== */
.sw-bg{position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:400;
  display:flex; align-items:center; justify-content:center; padding:16px;}
.sw-modal{position:relative; background:var(--panel); border-radius:16px; width:100%;
  max-width:430px; padding:18px 18px 16px; box-shadow:0 16px 50px rgba(0,0,0,.35); text-align:center;}
.sw-modal h3{margin:0 0 2px; font-size:17px;}
.sw-modal .sw-sub{color:var(--text-muted); font-size:12px; margin-bottom:14px; line-height:1.4;}
.sw-prev{margin:-4px 0 12px; font-size:13px; color:var(--text-muted);}
.sw-prev b{color:var(--text); font-family:'JetBrains Mono',monospace;}
.sw-sample{display:flex; align-items:center; justify-content:center; gap:10px; margin-bottom:12px;
  font-size:13px; font-weight:700; color:var(--text-muted); text-transform:none;}
.sw-sample input{width:100px; padding:10px; font-size:20px; font-weight:800; text-align:center;
  border:1px solid var(--border); border-radius:10px; background:var(--panel); color:var(--text);
  font-family:'JetBrains Mono',monospace;}
.sw-time{font-family:'JetBrains Mono',monospace; font-weight:700; font-size:42px; line-height:1.05;
  letter-spacing:1px; margin:8px 0 2px; color:var(--text); font-variant-numeric:tabular-nums;}
.sw-time .sw-ms{font-size:24px; color:var(--text-muted);}
.sw-toggle{width:74%; margin:14px auto 2px; display:block; border:0; border-radius:16px;
  padding:26px 0; font-size:24px; font-weight:800; letter-spacing:.08em; color:#fff;
  background:var(--success); box-shadow:0 6px 16px rgba(0,0,0,.18); cursor:pointer;
  transition:background .12s ease, transform .06s ease; min-height:0;}
.sw-toggle:active{transform:scale(.98);}
.sw-toggle.running{background:var(--danger);}
.sw-result{margin:12px 0 2px; font-size:14px; color:var(--text);}
.sw-result b{font-size:24px; font-family:'JetBrains Mono',monospace; color:var(--accent-strong);}
.sw-result .sw-per{color:var(--text-muted); font-size:12px;}
.sw-actions{display:flex; gap:10px; margin-top:12px;}
.sw-actions button{flex:1; padding:13px; border-radius:12px; font-weight:700; font-size:14px;
  border:0; cursor:pointer; min-height:0;}
.sw-actions .sw-redo{background:var(--panel-alt); color:var(--text);}
.sw-actions .sw-apply{background:var(--accent); color:#111;}
.sw-actions .sw-apply:disabled{opacity:.4; cursor:not-allowed;}
.sw-x{display:block; width:100%; margin-top:10px; padding:10px; border:0; border-radius:10px;
  background:transparent; color:var(--text-muted); font-weight:600; cursor:pointer; min-height:0;}

/* tombol ⏱ kecil di sebelah input CT + wrapper input+tombol */
.ct-sw-wrap{display:flex; gap:6px; align-items:stretch;}
.ct-sw-wrap > input{flex:1 1 auto; min-width:0;}
.sw-open-btn{flex:0 0 auto; border:1px solid var(--border); background:var(--panel-alt);
  color:var(--text); border-radius:8px; padding:0 9px; cursor:pointer; font-size:15px;
  line-height:1; min-height:0;}
.sw-open-btn:hover{background:var(--accent-soft);}

/* ===== TIMELINE PEMESANAN BARANG (tab report-timeline) =====
   Warna status dipakai konsisten di dua tempat: rel titik kecil di baris
   tabel, dan garis waktu vertikal di rincian. Dibedakan lewat warna DAN
   bentuk (isi/kosong/setengah) — jangan andalkan warna saja, sebagian
   pemakai melihatnya di tablet lapangan dengan layar silau. */
.tl-chips{display:flex; flex-wrap:wrap; gap:8px; align-items:center;}
.tl-chip-total{font-size:13px; color:var(--text-muted); margin-right:4px;}
.tl-chip{
  border:1px solid var(--border-strong); background:var(--panel-alt); color:var(--text-muted);
  border-radius:99px; padding:6px 12px; font-size:12px; cursor:pointer; min-height:0;
}
.tl-chip b{color:var(--text); margin-left:4px;}
.tl-chip:hover{background:var(--accent-soft); border-color:var(--accent-strong); color:var(--accent-strong);}
.tl-chip.ok{background:rgba(27,122,68,.12); border-color:rgba(27,122,68,.32); color:var(--success);}

.tl-sub{font-size:11px; color:var(--text-muted); margin-top:2px;}

/* Rel titik di dalam baris tabel */
.tl-rel{display:flex; align-items:center; gap:0; min-width:104px;}
.tl-dot{
  width:11px; height:11px; border-radius:50%; flex:0 0 auto;
  border:2px solid var(--border-strong); background:var(--panel);
}
.tl-garis{flex:1 1 auto; height:2px; background:var(--border); min-width:6px;}
.tl-dot.tl-selesai{background:var(--success); border-color:var(--success);}
.tl-dot.tl-sebagian{background:linear-gradient(90deg,var(--accent) 50%,var(--panel) 50%); border-color:var(--accent-strong);}
.tl-dot.tl-menunggu{background:var(--panel); border-color:var(--accent-strong);}
.tl-dot.tl-belum{background:var(--panel); border-color:var(--border);}

/* Baris rincian yang terbuka */
.tl-detail-row > td{background:var(--panel-soft) !important; padding:16px;}
.tl-detail-row:hover > td{background:var(--panel-soft) !important;}
.tl-detail{display:flex; flex-direction:column; gap:14px;}
.tl-h{margin:4px 0 6px; font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:var(--text-muted);}

/* Garis waktu horizontal (jadi vertikal di layar sempit) */
.tl-steps{display:flex; gap:0; flex-wrap:wrap;}
.tl-step{display:flex; align-items:flex-start; gap:8px; flex:1 1 150px; min-width:150px; position:relative; padding-right:10px;}
.tl-step-ic{
  width:14px; height:14px; border-radius:50%; flex:0 0 auto; margin-top:2px;
  border:2px solid var(--border-strong); background:var(--panel);
}
.tl-step.tl-selesai .tl-step-ic{background:var(--success); border-color:var(--success);}
.tl-step.tl-sebagian .tl-step-ic{background:linear-gradient(90deg,var(--accent) 50%,var(--panel) 50%); border-color:var(--accent-strong);}
.tl-step.tl-menunggu .tl-step-ic{border-color:var(--accent-strong); box-shadow:0 0 0 3px var(--accent-soft);}
.tl-step-tx{display:flex; flex-direction:column; min-width:0;}
.tl-step-tx b{font-size:12.5px;}
.tl-step-tx span{font-size:11px; color:var(--text-muted); line-height:1.5;}
.tl-step.tl-belum .tl-step-tx b{color:var(--text-faint);}
.tl-meta{font-size:12px; color:var(--text-muted);}
.tl-meta b{color:var(--text);}

@media (max-width:760px){
  .tl-steps{flex-direction:column;}
  .tl-step{flex:1 1 auto; min-width:0;}
}

/* ===== POPUP PILIH LINE (layar Buat Jadwal) =====
   Dialog sederhana: latar gelap + kartu putih di tengah. Dibuat di sini
   karena aplikasi ini belum punya komponen dialog sendiri — sebelumnya
   semua konfirmasi memakai confirm() bawaan browser, yang tidak bisa
   memuat tabel pilihan seperti ini. */
.dlg-backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:300;
  display:flex; align-items:center; justify-content:center; padding:20px;
}
.dlg-backdrop[hidden]{display:none !important;}
.dlg{
  background:var(--panel); border:1px solid var(--border-strong);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-md);
  width:820px; max-width:100%; max-height:86vh; display:flex; flex-direction:column;
}
.dlg-head{padding:18px 22px 12px; border-bottom:1px solid var(--border);}
.dlg-head h3{margin:0 0 4px 0;}
.dlg-head p{margin:0; font-size:13px; color:var(--text-muted);}
.dlg-body{padding:14px 22px; overflow-y:auto; flex:1 1 auto;}
.dlg-foot{
  padding:14px 22px 18px; border-top:1px solid var(--border);
  display:flex; gap:10px; justify-content:flex-end; align-items:center; flex-wrap:wrap;
}
.dlg-foot .kiri{margin-right:auto; display:flex; gap:10px; align-items:center;}
.dlg table{width:100%;}
.dlg td, .dlg th{padding:8px 10px; font-size:13px;}
.dlg select{min-height:38px; padding:7px 10px; width:100%;}
/* Penanda asal usulan: dari CT, atau tidak ada acuan sama sekali. */
.asal-ct{font-size:11px; color:var(--success); white-space:nowrap;}
.asal-kosong{font-size:11px; color:var(--text-faint); white-space:nowrap;}

@media (max-width:600px){
  .dlg{width:100%; max-height:92vh;}
  .dlg-head, .dlg-body, .dlg-foot{padding-left:14px; padding-right:14px;}
  .dlg td, .dlg th{padding:6px 6px; font-size:12px;}
}

/* Komponen yang tally sheet-nya sudah ada tapi CT-nya belum diisi. Tidak
   punya slot jadwal, jadi tidak bisa diisi hasil kerjanya — ditampilkan
   redup supaya jelas bedanya dari baris yang siap dikerjakan, tapi tetap
   kelihatan supaya tidak tertinggal tanpa ada yang tahu. */
.fl-table tr.fl-tanpact{background:repeating-linear-gradient(45deg,transparent,transparent 6px,rgba(194,97,15,.05) 6px,rgba(194,97,15,.05) 12px);}
.fl-table tr.fl-tanpact td{color:var(--text-muted);}
.fl-table tr.fl-tanpact .fl-sesi{color:#9E5E0C;}
/* Barang yang masih menyisakan komponen tanpa CT — ditandai supaya tidak
   tenggelam di antara barang yang sudah lengkap. */
tr.ct-belum td{background:rgba(163,53,38,.05);}

/* ===== MATRIKS CT: komponen ke bawah, proses ke samping =====
   Nama proses ditulis mendatar dan dibiarkan turun per kata — "Edging
   Double" jadi dua baris, "Assembly / Handwrapping" jadi tiga. Semua kolom
   proses lebarnya sama supaya deretan centangnya lurus dan enak dibaca
   menurun. Isinya baca saja; mengubah komponen tetap lewat kartu CT. */
/* TIDAK ADA kotak gulir sendiri. Selama tabelnya dibungkus elemen yang
   bisa digulir, kepala tabel menempel ke kotak itu — dan karena kotaknya
   tidak pernah tergulir ke bawah, kepalanya ikut hilang waktu halaman
   digulir. Dengan pembungkusnya dilepas, halaman jadi satu-satunya yang
   menggulir: kepala tabel menempel ke atas layar, kolom No dan Komponen
   menempel ke kiri layar, dua-duanya tetap terlihat sejauh apa pun
   digulir. Ongkosnya: halaman ikut melebar ke samping. */
.mtx-bungkus{overflow:visible;}
table.mtx{border:1px solid var(--border); border-radius:6px;}
table.mtx{border-collapse:separate; border-spacing:0; font-size:12px; width:100%;}
/* Pemilihnya sengaja anak langsung: di dalam matriks ada laci berisi tabel
   CT komponen. Tanpa ">" semua aturan matriks ikut menempel ke tabel di
   dalam laci itu — termasuk header yang menempel, yang membuat judul
   kolomnya melayang jauh dari barisnya. */
table.mtx > * > tr > th, table.mtx > * > tr > td{border-bottom:1px solid var(--border); border-right:1px solid var(--border);}
/* Menempel di bawah topbar + bar menu yang juga menempel. Tingginya
   diukur app.js (--topbar-h, --tabs-h), bukan ditebak: judul topbar bisa
   turun ke baris kedua dan bar menu bisa membungkus jadi dua baris.
   z-index 30 -> di bawah bar menu (40) dan topbar (50), jadi tertimpa
   rapi waktu bersinggungan, bukan menembus. */
table.mtx > thead > tr > th{position:sticky;
  top:calc(var(--topbar-h, 56px) + var(--tabs-h, 44px)); z-index:30; background:var(--panel-alt);
  vertical-align:bottom; padding:5px 4px 6px; font-size:11px;}
/* Lebar seragam untuk semua kolom proses. 62px memuat "Handwrapping"
   pada 10px tanpa dipenggal di tengah kata. */
th.mtx-proses{width:62px; min-width:62px; max-width:62px; text-align:center; padding:5px 1px 6px;}
/* overflow-wrap:normal -> kata tidak pernah dipenggal di tengah, jadi
   "Penebalan" tetap satu baris. Yang turun cuma antar kata. */
.mtx-nama{display:block; font-size:9.5px; line-height:1.22; font-weight:600;
  white-space:normal; overflow-wrap:normal; word-break:keep-all; margin-bottom:4px; min-height:36px;}
/* Kolom komponen: dipaku di kiri, selebar yang perlu saja. */
/* Nomor urut dipaku paling kiri, kolom komponen menempel di sebelahnya. */
td.mtx-no, th.mtx-no{position:sticky; left:0; z-index:2; background:var(--panel);
  width:34px; min-width:34px; text-align:right; padding:3px 6px;
  color:var(--text-muted); font-variant-numeric:tabular-nums;}
th.mtx-no.mtx-sudut{z-index:31; background:var(--panel-alt); font-weight:700;}
th.mtx-komp{position:sticky; left:34px; z-index:2; background:var(--panel); text-align:left;
  width:180px; min-width:150px; max-width:200px; font-weight:400; cursor:pointer;
  padding:3px 8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
th.mtx-komp:hover{background:var(--panel-alt); color:var(--accent);}
/* Semua komponen ditebalkan KECUALI part assembly — yang assembly justru
   dibiarkan tipis supaya tidak bersaing dengan komponen utamanya. */
th.mtx-komp.mtx-induk{font-weight:700;}
th.mtx-sudut{z-index:31; background:var(--panel-alt); cursor:default; vertical-align:bottom;}
th.mtx-komp.mtx-sudut{font-weight:700;}   /* judul kolom Komponen */
td.mtx-info, th.mtx-info{padding:3px 7px; color:var(--text-muted); white-space:nowrap;}
th.mtx-info{width:1%;}
td.mtx-mat{max-width:140px; overflow:hidden; text-overflow:ellipsis;}
td.mtx-angka{text-align:right; font-variant-numeric:tabular-nums;}
td.mtx-edge{text-align:center; letter-spacing:.5px;}
td.mtx-sel{text-align:center; padding:3px 0;}
td.mtx-sel input{width:auto; margin:0; cursor:pointer; transform:scale(1.1);}
td.mtx-sel input:disabled{cursor:not-allowed; opacity:.55;}
/* Diubah tapi belum disimpan. */
td.mtx-ubah{background:rgba(196,138,22,.18); box-shadow:inset 0 0 0 1px var(--accent);}

/* Tombol CT di layar Buat Jadwal: hijau kalau barangnya sudah punya CT,
   jadi baris yang masih perlu diisi langsung kelihatan dari jauh. */
button.sudah-ct{background:var(--success); border-color:var(--success); color:#fff;}
button.sudah-ct:hover{filter:brightness(.94);}

/* ==========================================================================
   LAYAR KELOLA CT — disusun untuk layar laptop: identitas barang satu baris,
   alat satu strip, lalu matriks. Detail CT tidak lagi jadi daftar kartu
   panjang di bawah, tapi laci yang terbuka persis di bawah barisnya.
   ========================================================================== */
.ct-bar-item{display:flex; align-items:center; gap:14px; background:var(--panel);
  border:1px solid var(--border); border-radius:8px; padding:9px 13px; margin-bottom:10px;}
.ct-bar-item .ct-cari{position:relative; flex:0 0 250px;}
.ct-bar-item .ct-cari input{width:100%; height:30px; font-size:12px;}
.ct-bar-item button{height:30px; padding:0 10px; font-size:11.5px; white-space:nowrap;}
.ct-identitas{flex:1 1 200px; min-width:140px;}
.ct-kode{font-weight:600; font-size:13px; white-space:nowrap;}
.ct-nama{color:var(--text-muted); font-size:11.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.ct-fakta{display:flex; gap:14px; flex:0 1 auto; flex-wrap:wrap; justify-content:flex-end;}
.ct-fakta div{font-size:10px; color:var(--text-muted); line-height:1.3; white-space:nowrap;
  text-transform:uppercase; letter-spacing:.04em;}
.ct-fakta b{display:block; font-size:12.5px; color:var(--text); text-transform:none; letter-spacing:0;}

/* Hasil pencarian menggantung di atas isi halaman, tidak mendorong barisnya. */
.ct-cari-hasil:not(:empty){position:absolute; top:calc(100% + 4px); left:0; right:0; z-index:60;
  background:var(--panel); border:1px solid var(--border); border-radius:6px;
  box-shadow:0 8px 24px rgba(0,0,0,.18); max-height:320px; overflow:auto; min-width:280px;}

.ct-bar-alat{display:grid; grid-template-columns:1.05fr .95fr 1.15fr; gap:10px; margin-bottom:10px;}
.ct-kotak{background:var(--panel); border:1px solid var(--border); border-radius:8px; padding:8px 11px;}
.ct-kotak h4{font-size:10.5px; text-transform:uppercase; letter-spacing:.05em;
  color:var(--text-muted); margin:0 0 6px; font-weight:600;}
.ct-kotak .isi{display:flex; gap:7px; align-items:center; flex-wrap:wrap;}
.ct-kotak input[type=text], .ct-kotak select{height:29px; font-size:12px;}
.ct-kotak button{height:29px; padding:0 10px; font-size:11.5px; white-space:nowrap; min-width:0;}

/* Input manual: satu baris isian, bukan form tiga blok. */
.ct-manual{background:var(--panel); border:1px solid var(--accent); border-radius:8px;
  padding:9px 11px; margin-bottom:10px;}
.ct-manual .baris{display:grid; gap:6px; align-items:end;
  grid-template-columns:48px 1.5fr .8fr .8fr 1fr 58px 58px 58px 52px 48px 52px 52px 1fr auto;}
.ct-manual label{display:block; font-size:9.5px; text-transform:uppercase; letter-spacing:.04em;
  color:var(--text-muted); margin-bottom:2px; white-space:nowrap;}
.ct-manual input{height:26px; font-size:11.5px; padding:2px 6px; width:100%;}
.ct-manual .aksi{display:flex; gap:6px;}
.ct-manual .aksi button{height:26px; font-size:11.5px; padding:0 11px; white-space:nowrap;}
.ct-manual .ket{font-size:10.5px; color:var(--text-muted); margin:7px 0 0;}
@media (max-width:1200px){ .ct-manual .baris{grid-template-columns:repeat(6, 1fr);} }

.ct-judul-baris{display:flex; align-items:center; gap:10px; margin:0 0 8px; flex-wrap:wrap;}
.ct-judul{font-size:12px; text-transform:uppercase; letter-spacing:.05em;
  color:var(--text-muted); margin:0; font-weight:600;}
.ct-ket{font-size:11px; color:var(--text-muted);}
.ct-judul-baris button{height:26px; padding:0 10px; font-size:11px;}

/* Laci detail CT di bawah baris komponennya. */
tr.mtx-laci > td{background:var(--panel-alt); padding:0;
  border-bottom:2px solid var(--border-strong); position:relative; z-index:1;}
/* Sel lacinya selebar seluruh matriks (bisa 2000px lebih). Isinya dipaku ke
   kiri layar dan dibatasi selebar layar, supaya judul kartu dan tombolnya
   tidak terlempar jauh ke kanan di luar pandangan. */
.mtx-laci-isi{padding:8px 10px; position:sticky; left:0;
  width:calc(100vw - 110px); max-width:100%; box-sizing:border-box;}
/* Header tabel CT di dalam laci TIDAK menempel: kalau menempel, judul
   kolomnya melayang ke atas layar terpisah dari baris isiannya. */
.mtx-laci-isi thead th{position:static; top:auto;}
.mtx-laci-isi .komp-kartu{margin-bottom:0 !important; background:var(--panel) !important;}
tr.mtx-buka th.mtx-komp{color:var(--accent); font-weight:700;}
/* Di dalam laci, kartunya tidak perlu panah lipat sendiri — lacinya yang buka-tutup. */
.komp-kartu.di-laci h4[data-role="compTitle"]{cursor:default;}
.komp-kartu.di-laci h4[data-role="compTitle"]::before{display:none;}
.komp-kartu.di-laci > .panel-head{cursor:default;}

/* Dokumen & kesiapan: dua tabel berdampingan, field-nya tidak memanjang. */
.ct-dua-kolom{display:grid; grid-template-columns:1.25fr 1fr; gap:10px; align-items:start;}
@media (max-width:1100px){ .ct-dua-kolom{grid-template-columns:1fr;} }
table.ct-dok{width:100%; border-collapse:collapse; font-size:12px; background:var(--panel);
  border:1px solid var(--border); border-radius:6px;}
table.ct-dok th{background:var(--panel-alt); font-size:10px; text-transform:uppercase; letter-spacing:.04em;
  color:var(--text-muted); text-align:left; padding:5px 8px; border-bottom:1px solid var(--border); font-weight:600;}
table.ct-dok td{padding:4px 8px; border-bottom:1px solid var(--border); vertical-align:middle;}
table.ct-dok select, table.ct-dok input[type=text], table.ct-dok input[type=date]{height:26px; font-size:11.5px; padding:2px 6px;}
table.ct-dok input[type=file]{font-size:10.5px; max-width:150px;}
table.ct-dok .w-status{width:118px;}
table.ct-dok .w-tgl{width:132px;}
.ct-dok-ket{font-size:11px; color:var(--text-muted);}
.ct-dok-unggah{display:flex; gap:6px; align-items:center; white-space:nowrap;}
button.ct-mini{height:24px; padding:0 9px; font-size:11px;}

/* Popup riwayat dokumen / BOM. */
.ct-tirai{position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:180;
  display:flex; align-items:center; justify-content:center; padding:20px;}
.ct-popup{background:var(--panel); border-radius:10px; width:min(820px,94vw); max-height:82vh;
  display:flex; flex-direction:column; box-shadow:0 12px 40px rgba(0,0,0,.28);}
.ct-popup header{display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:10px 15px; border-bottom:1px solid var(--border);}
.ct-popup header h4{margin:0; font-size:13px;}
.ct-popup .isi{overflow:auto; padding:0 6px 8px;}
.ct-popup table{width:100%; border-collapse:collapse; font-size:12px;}

.ct-cari-hasil .item-search-result{white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

/* Daftar hasil pencarian barang: tabel rapat berkolom tetap, bukan kalimat
   panjang per baris. Kolom tetap membuat mata bisa menyusuri kolom Nama
   Barang saja, dan nama yang kepanjangan dipotong dengan elipsis — tidak
   mendorong kolom lain. Satu baris tersorot, digeser pakai panah. */
.ct-cari-hasil:not(:empty){min-width:730px;}
table.cari-tabel{width:100%; border-collapse:collapse; font-size:11.5px; table-layout:fixed;}
.cari-tabel thead th{position:sticky; top:0; z-index:2; background:var(--panel-alt);
  font-size:9px; text-transform:uppercase; letter-spacing:.05em; color:var(--text-muted);
  text-align:left; padding:4px 8px; border-bottom:1px solid var(--border); font-weight:700;}
.cari-tabel td{padding:3px 8px; border-bottom:1px solid var(--border);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.cari-tabel .c-spk{width:142px;}
.cari-tabel .c-kode{width:150px; font-family:'JetBrains Mono',monospace;}
.cari-tabel .c-qty{width:56px; text-align:right; font-variant-numeric:tabular-nums;}
/* Penanda "belum BOM" punya kolom sendiri — kalau ditempel di belakang nama
   barang, dia yang pertama kepotong justru di baris yang perlu diperhatikan. */
.cari-tabel .c-tanda{width:86px; text-align:right; padding-right:10px;}
.cari-tabel .badge{font-size:9.5px; padding:0 5px; margin-left:5px;}
tr.cari-baris{cursor:pointer;}
tr.cari-baris:hover td, tr.cari-baris.aktif td{background:var(--panel-soft);}
tr.cari-baris.aktif td:first-child{box-shadow:inset 3px 0 0 var(--accent-strong);}
tr.cari-judul-baris td{background:var(--panel); border-bottom:none; padding:6px 8px 2px;
  font-size:9px; text-transform:uppercase; letter-spacing:.06em;
  color:var(--text-muted); font-weight:700;}
.ct-identitas{cursor:pointer;}
.ct-identitas:hover .ct-kode{color:var(--accent);}

/* ===== REPORT: MONITORING KOMPONEN SPK (laporan-monitoring.js) =====
   Gabungan halaman lama laporan.html & laporan-recap.html. Semua di-scope
   ke #tab-report-monitoring supaya tidak menimpa tabel tab lain. */
#tab-report-monitoring .muted-sm{color:var(--text-muted); font-size:12px; font-weight:400;}
#tab-report-monitoring .empty-msg, #tab-report-monitoring .err-msg{padding:20px; color:var(--text-muted);}
#tab-report-monitoring .err-msg{color:#B3261E;}
#tab-report-monitoring .lm-spk-wrap{max-height:320px; overflow:auto; border:1px solid var(--border); border-radius:var(--radius);}
#tab-report-monitoring table.picker-table{font-size:13px;}
#tab-report-monitoring table.picker-table th, #tab-report-monitoring table.picker-table td{padding:6px 8px; border-bottom:1px solid var(--border); white-space:nowrap;}
#tab-report-monitoring table.picker-table thead th{background:var(--panel-alt); cursor:pointer; user-select:none;}
#tab-report-monitoring table.picker-table thead th:hover{background:var(--accent-soft);}
#tab-report-monitoring table.picker-table td.item-name{white-space:normal; min-width:220px;}
#tab-report-monitoring table.picker-table tbody tr:hover td{background:var(--panel-soft);}
#tab-report-monitoring .sort-arrow{color:var(--accent-strong); margin-left:3px;}
#tab-report-monitoring .badge-status{padding:2px 8px; border-radius:999px; font-size:11px; font-weight:600; white-space:nowrap;}
#tab-report-monitoring .badge-antrian{background:#E7E9EC; color:#4B5563;}
#tab-report-monitoring .badge-wip{background:#FFF2CC; color:#7A5B00;}
#tab-report-monitoring .badge-selesai{background:#C8EFD2; color:#1F6F3B;}

#tab-report-monitoring .lm-options{display:flex; flex-wrap:wrap; gap:10px 24px; align-items:center; margin-top:14px; padding-top:12px; border-top:1px solid var(--border); font-size:13px;}
#tab-report-monitoring .lm-opt-group{display:flex; flex-wrap:wrap; gap:8px 16px; align-items:center;}
#tab-report-monitoring .lm-opt-group:last-child{margin-left:auto;}
#tab-report-monitoring .lm-opt-group label{display:inline-flex; align-items:center; gap:6px; cursor:pointer; margin:0; text-transform:none; letter-spacing:0; font-size:13px; font-weight:500; color:var(--text);}
#tab-report-monitoring .lm-opt-label{font-weight:700; color:var(--text-muted);}

#tab-report-monitoring .lm-section-title{margin:22px 0 10px;}
#tab-report-monitoring .lm-section-title h4{margin:0;}
#tab-report-monitoring .lm-section-title p{margin:2px 0 0; color:var(--text-muted); font-size:12px;}
#tab-report-monitoring .lm-recap{margin-bottom:10px;}
#tab-report-monitoring .mon-card{border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; margin-bottom:22px; background:var(--panel);}
#tab-report-monitoring .mon-head{display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding:10px 14px; background:var(--panel-alt);}
#tab-report-monitoring .mon-head .grow{flex:1 1 auto; font-weight:600;}
#tab-report-monitoring .tag{padding:3px 10px; border-radius:999px; font-size:12px; font-weight:600;}
#tab-report-monitoring .tag-item{background:#DCEFE1; color:#1F6F3B;}
#tab-report-monitoring .tag-qty{background:#FFF2CC; color:#7A5B00;}
#tab-report-monitoring .tag-op{background:#FDECEA; color:#A02B22;}
#tab-report-monitoring .tag-due{background:#E3E8FD; color:#2B3F9E;}
#tab-report-monitoring .mon-table-wrap{overflow-x:auto; background:var(--panel);}
#tab-report-monitoring .lm-recap .mon-table-wrap{border:1px solid var(--border); border-radius:var(--radius-lg);}
#tab-report-monitoring table.mon-table{font-size:13px; white-space:nowrap;}
#tab-report-monitoring table.mon-table th, #tab-report-monitoring table.mon-table td{border:1px solid var(--border); padding:6px 8px; text-align:center;}
#tab-report-monitoring table.mon-table th{background:var(--panel-alt); position:static;}
#tab-report-monitoring table.mon-table th.sortable{cursor:pointer; user-select:none;}
#tab-report-monitoring table.mon-table th.sortable:hover{background:var(--accent-soft);}
#tab-report-monitoring table.mon-table td.comp-name{text-align:left; white-space:normal; min-width:160px;}
#tab-report-monitoring table.mon-table td.item-name{text-align:left; white-space:normal; min-width:220px;}
#tab-report-monitoring table.mon-table td.na{background:#D9D9D9; color:#777;}
#tab-report-monitoring table.mon-table td.done{background:#C8EFD2; font-weight:600;}
#tab-report-monitoring table.mon-table tr.totals td{font-weight:700; background:#FFF6CC;}
#tab-report-monitoring table.mon-table tr.pct td{font-weight:700; background:#FFE9A8;}
#tab-report-monitoring table.mon-table .col-packing{background:#FFFDE7;}
#tab-report-monitoring table.mon-table td.col-packing.done{background:#C8EFD2;}

/* ===== REPORT: REKAP EXPORT & GOLDEN SAMPLE (rekap-export.js) ===== */
#tab-report-export .rx-ringkasan{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:12px;}
#tab-report-export .rx-kartu{flex:1 1 140px; border:1px solid var(--border); border-radius:var(--radius); padding:10px 14px; background:var(--panel-soft);}
#tab-report-export .rx-kartu b{display:block; font-size:20px;}
#tab-report-export .rx-kartu span{font-size:12px; color:var(--text-muted);}
#tab-report-export .rx-kartu.ok b{color:var(--success);}
#tab-report-export .rx-kartu.warn b{color:var(--accent-strong);}
#tab-report-export .rx-wrap{overflow:auto; max-height:70vh; border:1px solid var(--border); border-radius:var(--radius);}
#tab-report-export table.rx-table{font-size:12px; min-width:1500px;}
#tab-report-export table.rx-table th{position:sticky; top:0; z-index:1; background:var(--panel-alt); padding:8px 6px; font-size:10.5px;}
#tab-report-export table.rx-table td{padding:5px 6px; border-bottom:1px solid var(--border); vertical-align:top;}
#tab-report-export table.rx-table td.num{text-align:right; white-space:nowrap;}
#tab-report-export table.rx-table td.ctr{text-align:center;}
#tab-report-export table.rx-table td.mono{font-family:ui-monospace, Consolas, monospace; white-space:nowrap;}
#tab-report-export table.rx-table td.rx-buyer{font-weight:700;}
#tab-report-export table.rx-table td.rx-po{font-weight:600; white-space:nowrap;}
#tab-report-export table.rx-table td.rx-item{min-width:180px;}
#tab-report-export table.rx-table td.rx-ket{min-width:160px; color:var(--text-muted);}
#tab-report-export table.rx-table tr.rx-buyer-baru td{border-top:2px solid var(--border-strong);}
#tab-report-export table.rx-table tr.rx-po-baru td{border-top:1px solid var(--border-strong);}
#tab-report-export table.rx-table .rx-auto{background:var(--panel-soft); white-space:nowrap;}
#tab-report-export table.rx-table td.rx-telat{color:var(--danger); font-weight:700;}
#tab-report-export .rx-bar{display:inline-block; width:46px; height:6px; background:var(--panel-alt); border-radius:3px; margin-right:4px; vertical-align:middle; overflow:hidden;}
#tab-report-export .rx-bar span{display:block; height:100%; background:var(--success);}
#tab-report-export .rx-sub{font-size:10.5px; color:var(--text-muted);}
#tab-report-export .rx-aksi{white-space:nowrap;}
#tab-report-export .rx-aksi button{padding:2px 8px; min-height:0;}
.rx-form{display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:4px 12px;}
.rx-form .field{margin-bottom:8px;}

/* ===== EXPORT: SCHEDULE CONTAINER & MASTER PACKING (container.js) ===== */
.ct-toggle{display:flex; gap:4px;}
.ct-toggle button.active{background:var(--accent-soft); color:var(--accent-strong); border-color:var(--accent-dim);}
.ct-buyer{margin:18px 0 8px;}
.ct-wrap{overflow:auto; max-height:72vh; border:1px solid var(--border); border-radius:var(--radius);}
table.ct-matriks, table.ct-mon{font-size:12px;}
table.ct-matriks th, table.ct-matriks td, table.ct-mon th, table.ct-mon td{padding:5px 6px; border:1px solid var(--border); vertical-align:top;}
table.ct-matriks thead th{position:sticky; top:0; z-index:1; background:var(--panel-alt); text-transform:none; letter-spacing:0; font-size:11px;}
table.ct-matriks tr.ct-sub-kepala th{top:auto; font-size:10px; padding:3px 6px;}
table.ct-matriks th.ct-kol{min-width:150px; text-align:center;}
.ct-kode{font-size:13px; font-weight:700; color:var(--text);}
.ct-jenis, .ct-sub{font-size:10.5px; color:var(--text-muted); font-weight:400;}
.ct-aksi{margin-top:4px; display:flex; gap:4px; justify-content:center;}
.ct-aksi button, .ct-kartu-kepala button{padding:2px 8px; min-height:0; font-size:11px;}
td.ct-item{min-width:200px;}
td.ct-total{background:#FFF6CC; font-weight:700;}
table.ct-matriks td.num, table.ct-mon td.num{text-align:right; white-space:nowrap;}
table.ct-mon td.mono{font-family:ui-monospace, Consolas, monospace; white-space:nowrap;}
table.ct-mon td.ctr{text-align:center;}
tr.ct-info td{font-size:11.5px; text-align:center;}
td.ct-info-judul{text-align:right !important; font-weight:600; color:var(--text-muted);}
.ct-bar{height:6px; background:var(--panel-alt); border-radius:3px; overflow:hidden; margin-top:4px;}
.ct-bar span{display:block; height:100%; background:var(--success);}
.ct-bar span.penuh{background:var(--accent);}
.ct-bar.kecil{display:inline-block; width:50px; vertical-align:middle; margin:0 4px 0 0;}
.ct-kartu{border:1px solid var(--border); border-radius:var(--radius); margin-bottom:12px; overflow:hidden;}
.ct-kartu-kepala{display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; padding:8px 10px; background:var(--panel-alt); font-size:12.5px;}
.ct-kartu table{width:100%;}
.ct-telat{color:var(--danger); font-weight:700;}
.ct-form{display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:4px 12px;}
.ct-form .field, .ct-tarik .field{margin-bottom:8px;}
.ct-tarik{display:grid; grid-template-columns:1fr 1fr; gap:12px; border-top:1px solid var(--border); padding-top:10px; margin-top:4px;}
.ct-tarik .row{gap:6px; flex-wrap:nowrap;}
.ct-so-list{display:flex; flex-direction:column; gap:4px; max-height:200px; overflow:auto; margin-top:6px;}
.ct-so-list button{text-align:left; font-size:12px;}
.ct-ringkas{display:flex; gap:16px; flex-wrap:wrap; align-items:center; font-size:12.5px; margin:8px 0;}
.ct-ringkas .ct-bar{flex:1 1 160px; margin:0;}
.ct-3d-wadah{position:relative; border:1px solid var(--border); border-radius:var(--radius); background:var(--panel-soft);}
.ct-3d-wadah canvas{display:block; width:100%; cursor:grab; touch-action:none;}
.ct-3d-tombol{position:absolute; top:6px; right:6px; display:flex; gap:4px;}
.ct-3d-tombol button{padding:2px 8px; min-height:0; font-size:11px; background:var(--panel);}
.ct-warna{display:inline-block; width:14px; height:14px; border-radius:3px;}
@media (max-width:700px){ .ct-tarik{grid-template-columns:1fr;} }

/* ===== MONITORING: JADWAL MINGGUAN KABAG (jadwal-mingguan.js) ===== */
/* Kotak Minggu (◀ tanggal ▶ Minggu ini) selebar isinya — kalau dibagi rata
   dengan filter lain, tombolnya meluber menimpa kotak Line. */
.filterbar .field.jm-minggu{flex:0 1 auto;}
.jm-minggu input{width:auto;}
.jm-legenda{font-size:11.5px; color:var(--text-muted); margin-top:4px;}
.jm-legenda .jm-beres, .jm-legenda .jm-lewat{padding:1px 6px; border-radius:3px;}
.jm-judul-cetak{font-size:16px; margin:14px 0 6px;}
.jm-proses{margin-bottom:22px;}
.jm-proses h3{margin:10px 0 6px; font-size:15px;}
.jm-sub{font-size:11px; color:var(--text-muted); font-weight:400;}
.jm-mesin{margin-bottom:12px; break-inside:avoid;}
.jm-mesin-judul{font-weight:700; font-size:13px; padding:4px 0;}
table.jm-tabel{font-size:12px; width:100%;}
table.jm-tabel th, table.jm-tabel td{border:1px solid var(--border); padding:4px 6px; vertical-align:top;}
table.jm-tabel thead th{background:var(--panel-alt); text-transform:none; letter-spacing:0; font-size:11px; text-align:center;}
table.jm-tabel th.jm-hari-ini{background:var(--accent-soft); color:var(--accent-strong);}
table.jm-tabel td.num{text-align:right; white-space:nowrap;}
table.jm-tabel td.mono{font-family:ui-monospace, Consolas, monospace; white-space:nowrap; font-size:11px;}
td.jm-barang{min-width:200px;}
.jm-komp{font-weight:700;}
td.jm-due{white-space:nowrap; font-size:11px; color:var(--text-muted);}
td.jm-tunda{color:var(--danger); font-weight:700;}
.jm-beres{background:rgba(27,122,68,.14);}
.jm-lewat{background:rgba(204,51,51,.12);}
.jm-hasil{color:var(--text-muted); font-size:10.5px;}
td.jm-jam{font-size:11px; color:var(--text-muted);}
td.jm-jam-judul{text-align:right; font-size:11px; color:var(--text-muted);}

/* Cetak: hanya isi jadwal, kertas landscape */
@media print {
  body.jm-cetak > *:not(.container):not(main):not(#app){display:none !important;}
  body.jm-cetak .tabs, body.jm-cetak header, body.jm-cetak .topbar, body.jm-cetak .jm-kontrol,
  body.jm-cetak #chatFab, body.jm-cetak #chatPanel, body.jm-cetak .tab-panel:not(#tab-jadwal-mingguan){display:none !important;}
  body.jm-cetak #tab-jadwal-mingguan{display:block !important;}
  body.jm-cetak{background:#fff;}
  body.jm-cetak table.jm-tabel{font-size:9.5px;}
  body.jm-cetak .jm-beres{background:#dcefe2 !important; -webkit-print-color-adjust:exact; print-color-adjust:exact;}
  body.jm-cetak .jm-lewat{background:#f6dcdc !important; -webkit-print-color-adjust:exact; print-color-adjust:exact;}
  @page { size: A4 landscape; margin: 10mm; }
}

/* =====================================================================
   SIDEBAR MENU — gelap, menempel di kiri (desktop) / laci geser (HP).
   Isinya tetap tombol .tab-btn yang sama; grup (.tab-dropdown) di desktop
   tampil sebagai judul seksi dengan semua menunya terbuka, di HP tetap
   bisa dibuka-tutup supaya laci tidak berisi 40 tombol sekaligus.
   ===================================================================== */
:root{
  --sb-w:256px;
  --sb-bg:#0B1220; --sb-garis:#1B2538; --sb-hover:#152036;
  --sb-teks:#C9D2DF; --sb-redup:#6F7D93; --sb-aktif:#2563EB;
}
.tabs{background:var(--sb-bg); color:var(--sb-teks);}
.nav-brand{padding:20px 22px 8px; flex:0 0 auto;}
.nav-logo{height:30px; width:auto; display:block; filter:brightness(1.75) saturate(1.25);}
.nav-isi{flex:1 1 auto; overflow-y:auto; padding:4px 12px 12px; scrollbar-width:thin; scrollbar-color:#26324A transparent;}
.tabs .tab-group-trigger{
  background:transparent; border:none; border-radius:0; color:var(--sb-redup);
  font-size:11.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  padding:18px 10px 6px; min-height:0; width:100%; justify-content:space-between;
}
.tabs .tab-group-trigger.has-active{color:var(--sb-redup); background:transparent; border:none;}
.tabs .tab-dropdown.open .tab-group-trigger{background:transparent; color:#fff;}
.tabs .tab-btn{
  display:flex; align-items:center; gap:12px; width:100%; text-align:left;
  border:none; border-radius:10px; padding:10px 12px; min-height:42px;
  color:var(--sb-teks); font-size:15px; font-weight:500; background:transparent; white-space:normal; line-height:1.25;
}
.tabs .tab-btn:hover{background:var(--sb-hover); color:#fff;}
.tabs .tab-btn.active{background:var(--sb-aktif); color:#fff; box-shadow:0 4px 14px rgba(37,99,235,.35);}
.nav-ikon{width:19px; height:19px; flex:0 0 auto;}
.nav-footer{flex:0 0 auto; border-top:1px solid var(--sb-garis); padding:12px;}
.tabs .nav-userbox{display:flex; align-items:center; gap:10px; padding:4px 8px 10px; margin:0; border:none; font-weight:400;}
.nav-avatar{
  width:34px; height:34px; border-radius:50%; flex:0 0 auto; display:grid; place-items:center;
  background:#1E2A40; color:#fff; font-weight:700; font-size:14px;
}
.nav-who{display:flex; flex-direction:column; min-width:0; line-height:1.25;}
.nav-who b{color:#fff; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.nav-role:not(:empty){
  align-self:flex-start; margin-top:3px; background:var(--sb-aktif); color:#fff;
  font-size:11px; font-weight:600; padding:1px 8px; border-radius:999px;
}
.tabs .nav-ver{margin-left:auto; font-size:10.5px; color:var(--sb-redup);}
.tabs .nav-logout{
  display:flex; align-items:center; justify-content:flex-start; text-align:left; gap:12px; width:100%; margin:0; border:none; border-radius:10px;
  padding:10px 12px; min-height:42px; background:transparent; color:var(--sb-teks); font-size:15px; font-weight:500;
}
.tabs .nav-logout:hover{background:var(--sb-hover); color:#fff;}

@media (min-width:1025px){
  #app.active{padding-left:var(--sb-w);}
  body.nav-collapsed #app.active{padding-left:0;}
  .tabs{
    position:fixed; top:0; left:0; bottom:0; width:var(--sb-w); z-index:45;
    flex-direction:column; align-items:stretch; flex-wrap:nowrap; gap:0; row-gap:0;
    padding:0; border:none; border-right:1px solid var(--sb-garis);
  }
  .tab-dropdown{position:static; width:100%;}
  .tabs .tab-group-trigger{pointer-events:none; cursor:default;}
  .tabs .tab-group-trigger .caret{display:none;}
  .tabs .tab-dropdown-menu{
    display:flex; position:static; flex-direction:column; gap:2px;
    margin:0; padding:0; min-width:0; background:transparent; border:none; box-shadow:none;
  }
  /* Logo pindah ke sidebar; topbar cukup menampilkan nama halaman. */
  .topbar .brand .dot, .topbar .brand-txt, .topbar .who{display:none;}
  #navCurrentLabel{display:inline-block; font-size:18px; color:var(--text);}
}

@media (max-width:1024px){
  .tabs{padding:0; gap:0; row-gap:0; border-right:1px solid var(--sb-garis);}
  .tabs .tab-group-trigger{color:var(--sb-teks); font-size:12.5px; padding:14px 10px; min-height:44px;}
  .tabs .tab-group-trigger.has-active{color:#fff;}
  .tabs .tab-group-trigger .caret{color:var(--sb-redup);}
  .tabs .tab-dropdown-menu{padding:0 0 6px 0;}
  .tabs .tab-btn{font-size:15px; padding:12px;}
}

@media print{
  #app.active{padding-left:0 !important;}
  .tabs{display:none !important;}
}
body.jm-cetak #app.active{padding-left:0;}

/* ---- Grup menu sebagai KARTU buka-tutup (Report s/d Administrasi).
   Ringkasan (.nav-tetap) tetap judul seksi biasa dengan menu terbuka. ---- */
.tabs .tab-dropdown:not(.nav-tetap){margin-top:6px;}
.tabs .tab-dropdown:not(.nav-tetap) > .tab-group-trigger{
  display:flex; align-items:center; gap:12px; pointer-events:auto; cursor:pointer;
  background:#111A2C; border:1px solid var(--sb-garis); border-radius:10px;
  padding:11px 12px; min-height:44px; color:var(--sb-teks);
  font-size:14px; font-weight:600; letter-spacing:0; text-transform:none;
}
.tabs .tab-dropdown:not(.nav-tetap) > .tab-group-trigger:hover{background:var(--sb-hover); color:#fff;}
.tabs .tab-dropdown:not(.nav-tetap) > .tab-group-trigger .caret{display:inline-block; margin-left:auto; color:var(--sb-redup); transition:transform .18s;}
.tabs .tab-dropdown.open:not(.nav-tetap) > .tab-group-trigger{background:#16213A; border-color:#2A3A5C; color:#fff; border-radius:10px 10px 0 0;}
.tabs .tab-dropdown.open:not(.nav-tetap) > .tab-group-trigger .caret{transform:rotate(180deg);}
/* Kartu tertutup yang memuat halaman aktif diberi tanda biru di kiri. */
.tabs .tab-dropdown:not(.nav-tetap) > .tab-group-trigger.has-active{color:#fff; box-shadow:inset 3px 0 0 var(--sb-aktif);}
.tabs .tab-dropdown:not(.nav-tetap) .tab-dropdown-menu{
  display:none; background:#0E1626; border:1px solid #2A3A5C; border-top:none;
  border-radius:0 0 10px 10px; padding:6px;
}
.tabs .tab-dropdown.open:not(.nav-tetap) .tab-dropdown-menu{display:flex;}
.nav-grup-nama{flex:1 1 auto; text-align:left;}
.tabs .nav-tetap > .tab-group-trigger{pointer-events:none;}
.tabs .nav-tetap > .tab-group-trigger .caret{display:none;}
.tabs .nav-tetap .tab-dropdown-menu{display:flex !important;}
@media (min-width:1025px){
  .tabs .tab-dropdown:not(.nav-tetap) .tab-dropdown-menu{display:none;}
  .tabs .tab-dropdown.open:not(.nav-tetap) .tab-dropdown-menu{display:flex;}
}

/* Jadwal Mingguan: baris BARANG (judul + subtotal) dan komponen di bawahnya. */
table.jm-tabel tr.jm-brg td{background:var(--panel-soft); border-top:2px solid var(--border-strong);}
table.jm-ringkas tr.jm-brg td{background:transparent; border-top:1px solid var(--border);}
table.jm-tabel tr.jm-brg td.jm-beres{background:rgba(27,122,68,.18);}
table.jm-tabel tr.jm-brg td.jm-lewat{background:rgba(204,51,51,.15);}
table.jm-tabel tr.jm-kmp td.jm-barang{padding-left:22px;}
table.jm-tabel tr.jm-kmp .jm-komp{font-weight:500;}
table.jm-tabel tr.jm-kmp td{font-size:11.5px;}
.jm-due-lewat{color:var(--danger) !important; font-weight:700;}
.jm-due-mepet{color:#B45309 !important; font-weight:700;}
table.jm-tabel tr.jm-bisa-lipat{cursor:pointer;}
table.jm-tabel tr.jm-bisa-lipat:hover td{filter:brightness(.97);}
.jm-panah{display:inline-block; width:14px; color:var(--text-muted); transition:transform .15s;}
tr.jm-terlipat .jm-panah{transform:rotate(-90deg);}
.jm-catatan{font-size:12px; color:var(--text-muted); margin:4px 0 10px;}
td.jm-mesin-sel{white-space:nowrap; font-size:11.5px;}

/* Timeline: dropdown isian otomatis di bawah kotak SPK / bahan baku. */
.tl-saran-induk{position:relative;}
.tl-saran{position:absolute; left:0; right:0; top:100%; margin-top:4px; z-index:120; max-height:320px; overflow-y:auto;
  background:var(--panel); border:1px solid var(--border-strong); border-radius:var(--radius); box-shadow:var(--shadow-md);}
.tl-saran-item{padding:8px 12px; cursor:pointer; border-bottom:1px solid var(--border);}
.tl-saran-item:last-child{border-bottom:none;}
.tl-saran-item:hover, .tl-saran-item.aktif{background:var(--accent-soft);}
.tl-saran-judul{font-size:14px; font-weight:600; color:var(--text);}
.tl-saran-sub{font-size:12px; color:var(--text-muted); font-family:'JetBrains Mono',monospace;}
/* Dropdown saran Timeline jangan terpotong panel yang bisa digulir menyamping (HP). */
.panel:has(.tl-saran:not([hidden])){overflow:visible;}
/* Pilihan Tampilkan di atas daftar SPK (langsung di bawah filter). */
#tab-report-monitoring .lm-options.lm-options-atas{margin:0 0 12px; padding:0 2px 12px; border-top:none; border-bottom:1px solid var(--border);}

/* ===== Report > Stock Barang (Container) ===== */
.ls-ringkas{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:10px; margin:6px 0 12px;}
.ls-kartu{background:var(--panel); border:1px solid var(--border); border-radius:var(--radius-lg); padding:10px 14px;}
.ls-kartu-label{font-size:12px; color:var(--text-muted); font-weight:600; text-transform:uppercase; letter-spacing:.04em;}
.ls-kartu-nilai{font-size:20px; font-weight:700; font-family:'Space Grotesk',sans-serif;}
.ls-kartu-nilai small{font-size:12px; color:var(--text-muted); font-weight:500;}
.ls-kartu-sub{font-size:12px; color:var(--accent-strong); font-weight:600;}
.ls-wrap{overflow:auto; max-height:70vh; border:1px solid var(--border); border-radius:var(--radius); background:var(--panel);}
table.ls-tabel{font-size:12px; width:100%; border-collapse:collapse;}
table.ls-tabel th, table.ls-tabel td{border:1px solid var(--border); padding:4px 6px; white-space:nowrap;}
table.ls-tabel thead th{position:sticky; top:0; background:var(--panel-alt); font-size:11px; text-align:center; z-index:2;}
table.ls-tabel thead tr:nth-child(2) th{top:26px;}
table.ls-tabel td.num{text-align:right;}
table.ls-tabel td.mono{font-family:'JetBrains Mono',monospace; font-size:11px;}
table.ls-tabel td:nth-child(2){white-space:normal; min-width:260px;}
table.ls-tabel tr.ls-gudang td{background:var(--accent-soft); font-weight:700; color:var(--accent-strong); border-top:2px solid var(--border-strong);}
table.ls-tabel tr.ls-kat td{background:var(--panel-soft); font-weight:700; font-size:11.5px; color:var(--text-muted);}
table.ls-tabel tfoot td{font-weight:700; background:var(--panel-alt);}
table.ls-tabel tr.ls-container td{color:var(--accent-strong);}
.ls-minus{color:var(--danger);}
.ls-sub{color:var(--text-faint);}
.ls-catatan{font-size:12px; color:var(--text-muted); margin-top:6px;}
.ls-judul-cetak{display:none;}
@media print{
  body.ls-cetak .tabs, body.ls-cetak .topbar, body.ls-cetak .ls-kontrol, body.ls-cetak #chatFab, body.ls-cetak #chatPanel,
  body.ls-cetak .tab-panel:not(#tab-report-stok-container){display:none !important;}
  body.ls-cetak #tab-report-stok-container{display:block !important;}
  body.ls-cetak #app.active{padding-left:0 !important;}
  body.ls-cetak .ls-judul-cetak{display:block; font-size:16px; margin:0 0 8px;}
  body.ls-cetak .ls-wrap{max-height:none; overflow:visible; border:none;}
  body.ls-cetak table.ls-tabel{font-size:9px;}
  body.ls-cetak table.ls-tabel thead th{position:static;}
  body.ls-cetak tr.ls-gudang td, body.ls-cetak tr.ls-kat td{-webkit-print-color-adjust:exact; print-color-adjust:exact;}
}
.ct-bar.ct-bar-kerja span{background:var(--info);}
#ctIsiSesuaiSPK{min-height:32px; padding:4px 12px; font-size:12.5px;}
.ct-tarik.ct-tarik-atas{border-top:none; padding-top:0; margin:0 0 10px; padding-bottom:10px; border-bottom:1px solid var(--border);}

/* ===== Bar tab menu yang dibuka (tab-bar.js) ===== */
.open-tabs{
  display:flex; align-items:flex-end; gap:4px; flex-wrap:nowrap; overflow-x:auto;
  margin:0 0 14px; padding:6px 6px 0; background:var(--panel-soft);
  border:1px solid var(--border); border-radius:var(--radius-lg);
  position:sticky; top:var(--topbar-h, 56px); z-index:40; scrollbar-width:thin;
}
.open-tabs[hidden]{display:none;}
.ot-tab{
  display:flex; align-items:center; flex:0 0 auto; max-width:260px;
  border:1px solid var(--border); border-bottom:none; border-radius:var(--radius) var(--radius) 0 0;
  background:var(--panel-alt); color:var(--text-muted);
}
.ot-tab:hover{background:var(--panel); color:var(--text);}
.ot-tab[aria-selected="true"]{
  background:var(--panel); color:var(--accent-strong); border-color:var(--border-strong);
  box-shadow:inset 0 3px 0 var(--accent); margin-bottom:-1px; padding-bottom:1px;
}
.ot-label{
  background:none; border:none; color:inherit; cursor:pointer; min-height:40px;
  padding:6px 4px 6px 14px; font:600 13px 'Inter',sans-serif; text-align:left;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:210px;
}
.ot-tutup{
  background:none; border:none; color:inherit; cursor:pointer; flex:0 0 auto;
  width:26px; height:26px; margin:0 6px 0 2px; border-radius:50%;
  font-size:17px; line-height:1; display:grid; place-items:center;
}
.ot-tutup:hover{background:var(--accent-soft); color:var(--danger);}
.ot-label:focus-visible, .ot-tutup:focus-visible{outline:none; box-shadow:var(--ring);}
@media (max-width:768px){ .ot-label{max-width:150px; font-size:12px;} .open-tabs{margin-bottom:10px;} }
@media print{ .open-tabs{display:none !important;} }
.ot-tetap .ot-label{padding-right:14px;}

/* ===== Pemantau SPK (pemantau-spk.js) ===== */
.pm-chips{display:flex; flex-wrap:wrap; gap:8px; align-items:center;}
.pm-chip-label{font-size:13px; color:var(--text-muted); margin-right:2px;}
.pm-chip{display:inline-flex; align-items:center; gap:6px; padding:4px 12px; border-radius:999px; font-size:13px; font-weight:600; border:1px solid var(--border); background:var(--panel-soft); color:var(--text-muted);}
.pm-chip b{color:var(--text);}
.pm-chip.err{background:rgba(194,47,38,.12); color:var(--danger); border-color:rgba(194,47,38,.32);}
.pm-chip.warn{background:rgba(224,135,15,.16); color:var(--accent-strong); border-color:rgba(224,135,15,.35);}
.pm-chip.ok{background:rgba(27,122,68,.14); color:var(--success); border-color:rgba(27,122,68,.32);}
.pm-scroll{overflow-x:auto;}
.pm-tabel{width:100%; border-collapse:collapse; font-size:13px; min-width:980px;}
.pm-tabel th{text-align:left; padding:8px 10px; font-size:12px; color:var(--text-muted); border-bottom:1px solid var(--border-strong); white-space:nowrap;}
.pm-tabel td{padding:9px 10px; border-bottom:1px solid var(--border); vertical-align:top;}
.pm-baris{cursor:pointer;}
.pm-baris:hover{background:var(--panel-alt);}
.pm-baris small{color:var(--text-muted);}
.pm-lampu{display:inline-block; width:12px; height:12px; border-radius:50%; margin-top:4px; background:var(--border-strong);}
.pm-lampu.merah{background:var(--danger);} .pm-lampu.kuning{background:var(--accent);} .pm-lampu.hijau{background:var(--success);} .pm-lampu.terlambat{background:#6A7583;}
.pm-poskol{white-space:nowrap;}
.pm-pos{display:inline-flex; align-items:center; gap:4px; margin:0 4px 4px 0; padding:2px 8px; border-radius:6px; font-size:12px; font-weight:600; border:1px solid var(--border); background:var(--panel-soft); color:var(--text-muted);}
.pm-pos i{font-style:normal; font-weight:700;}
.pm-pos.selesai{background:rgba(27,122,68,.14); color:var(--success); border-color:rgba(27,122,68,.32);}
.pm-pos.segera{background:rgba(224,135,15,.16); color:var(--accent-strong); border-color:rgba(224,135,15,.35);}
.pm-pos.terlambat{background:rgba(194,47,38,.12); color:var(--danger); border-color:rgba(194,47,38,.32);}
.pm-g{color:var(--text-muted);} .pm-g.err{color:var(--danger); font-weight:600;} .pm-g.ok{color:var(--success); font-weight:600;}
.pm-g.warn{color:var(--warning, #b7791f); font-weight:600;} .pm-masalah{color:var(--danger);} .pm-bahan li{margin-bottom:4px;} .pm-bahan .btn-sm{margin-left:6px; padding:1px 8px; font-size:11.5px;}
.pm-detail td{background:var(--panel-soft); padding:10px 14px 14px;}
.pm-tabel-kecil{width:100%; border-collapse:collapse; font-size:12.5px; min-width:0;}
.pm-tabel-kecil th{padding:4px 8px; font-size:11.5px; color:var(--text-muted); border-bottom:1px solid var(--border);}
.pm-tabel-kecil td{padding:5px 8px; border-bottom:1px solid var(--border); background:transparent;}
.pm-sub{margin:10px 0 4px; font-size:12.5px; font-weight:600; color:var(--text-muted);}
.pm-bahan{margin:0; padding-left:18px; font-size:12.5px;} .pm-bahan small{color:var(--text-muted);}
.pm-catatan{margin-top:12px; font-size:12px; color:var(--text-muted); line-height:1.5;}
@media print{ #tab-pemantau-spk .filterbar, #pmExcel, #pmMuat{display:none !important;} }
.pm-tabel td:nth-child(3){min-width:170px;}
.pm-tabel td:nth-child(4){min-width:210px;}
.pm-tabel td:nth-child(6){min-width:190px;}

/* Pemantau SPK — kartu per pos + rincian */
.pm-kartu-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:8px; margin:4px 0 10px;}
.pm-kartu{display:flex; flex-direction:column; gap:3px; text-align:left; padding:8px 10px; border-radius:8px; border:1px solid var(--border); background:var(--panel-soft); color:var(--text); cursor:pointer; font:inherit;}
.pm-kartu:hover{border-color:var(--text-muted);}
.pm-kartu.aktif{box-shadow:0 0 0 2px var(--accent-strong, #e0870f);}
.pm-kartu-judul{font-weight:700; font-size:13px;} .pm-kartu-judul i{font-style:normal;}
.pm-kartu-ket{font-size:12px; line-height:1.35;}
.pm-kartu-batas{font-size:11px; color:var(--text-muted);}
.pm-kartu.selesai{border-color:rgba(27,122,68,.4); background:rgba(27,122,68,.08);} .pm-kartu.selesai .pm-kartu-judul{color:var(--success);}
.pm-kartu.segera{border-color:rgba(224,135,15,.45); background:rgba(224,135,15,.08);} .pm-kartu.segera .pm-kartu-judul{color:var(--accent-strong);}
.pm-kartu.terlambat{border-color:rgba(194,47,38,.4); background:rgba(194,47,38,.07);} .pm-kartu.terlambat .pm-kartu-judul{color:var(--danger);}
.pm-rinci{border:1px solid var(--border); border-radius:8px; padding:10px 12px; background:var(--panel, #fff);}
.pm-rinci-judul{font-weight:700; margin-bottom:4px;}
.pm-tindak{margin:0 0 8px; font-size:12.5px;}
.pm-rinci-tabel{margin:4px 0 8px;} .pm-rinci-tabel td{padding:4px 8px; border-bottom:1px solid var(--border); vertical-align:top;}
.pm-rinci-barang{margin-bottom:10px;}
.pm-progres{width:110px; height:6px; border-radius:3px; background:var(--border); overflow:hidden; margin-bottom:2px;}
.pm-progres span{display:block; height:100%; background:var(--success);}
.pm-teknis-ringkas{display:flex; align-items:center; gap:8px; margin:4px 0 6px; font-size:12.5px;} .pm-teknis-ringkas .pm-progres{width:160px; height:8px; margin:0;}
.pm-proses-baris{cursor:pointer;} .pm-proses-baris:hover td{background:rgba(0,0,0,.035);}
.pm-panah{display:inline-block; width:12px; color:var(--text-muted);}
.pm-komp-baris > td{background:var(--panel-soft); padding:6px 10px 10px 26px !important;}
.pm-komp-tabel{width:100%; border-collapse:collapse; font-size:12px; margin-bottom:4px;}
.pm-komp-tabel th{text-align:left; padding:3px 6px; font-size:11px; color:var(--text-muted); border-bottom:1px solid var(--border);}
.pm-komp-tabel td{padding:3px 6px; border-bottom:1px dashed var(--border); vertical-align:top;}
.pm-target{padding:6px 10px; border-radius:6px; margin:2px 0 8px; font-size:12.5px;}
.pm-target.err{background:rgba(194,47,38,.1); color:var(--danger); border:1px solid rgba(194,47,38,.3);}
.pm-target.ok{background:rgba(27,122,68,.1); color:var(--success); border:1px solid rgba(27,122,68,.3);}
.pm-lewat-dl td{background:rgba(194,47,38,.05);}

/* ===== DASHBOARD POSISI LANTAI (posisi-lantai.js) =====
   Matriks barang jadi x proses. Semua aturan diawali .pl-/#plTabel supaya tidak
   bentrok dengan aturan tabel umum di atas (padding td 12px, belang genap,
   hover amber) — warna sel di sini adalah data, jangan tertimpa. */
.pl-ringkas{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:8px; margin:4px 0 12px;}
.pl-tile{background:var(--panel-soft); border:1px solid var(--border); border-radius:var(--radius); padding:8px 12px; min-width:0;}
.pl-tile b{display:block; font-family:'JetBrains Mono',monospace; font-size:22px; font-weight:500; color:var(--text);}
.pl-tile b u{font:500 12px 'Inter',sans-serif; text-decoration:none; color:var(--text-muted); margin-left:6px;}
.pl-tile span{color:var(--text-muted); font-size:12px; line-height:1.3; display:block;}
.pl-legend{display:flex; flex-wrap:wrap; gap:6px 14px; align-items:center; font-size:12px; color:var(--text-muted); margin:10px 0;}
.pl-legend i{display:inline-block; width:14px; height:14px; border-radius:3px; margin-right:5px; vertical-align:-3px;}
.pl-legend i.k1,#plTabel td.k1{background:#D3EBDD; color:#14603A;}
.pl-legend i.k2,#plTabel td.k2{background:#F6EBAE; color:#6B5600;}
.pl-legend i.k3,#plTabel td.k3{background:#F3C27A; color:#7A4300;}
.pl-legend i.k4,#plTabel td.k4{background:var(--danger); color:#fff;}
.pl-legend i.pltd{background:linear-gradient(225deg,#1C6FB6 0 50%,#EDF1F5 50% 100%); border:1px solid var(--border);}
.pl-legend i.hariini{background:#D6E8F7; box-shadow:inset 3px 0 0 var(--info);}
.pl-scroll{overflow:auto; max-height:78vh; background:var(--panel); border:1px solid var(--border); border-radius:var(--radius);}
#plTabel{border-collapse:separate; border-spacing:0; width:100%; min-width:760px; font-size:12px;}
#plTabel th, #plTabel td{padding:0; border-bottom:1px solid var(--border); border-right:1px solid var(--border); text-align:center; vertical-align:middle;}
#plTabel thead th{position:sticky; top:0; z-index:3; background:var(--panel-alt); padding:4px 6px; font-size:11.5px; border-bottom:2px solid var(--border-strong);}
#plTabel thead th small{display:block; font:400 10px 'Inter',sans-serif; text-transform:none; letter-spacing:0; color:var(--text-muted);}
#plTabel th.pl-nm, #plTabel td.pl-nm{position:sticky; left:0; z-index:2; text-align:left; background:var(--panel); min-width:190px; max-width:190px; padding:1px 10px;}
#plTabel thead th.pl-nm{z-index:4; background:var(--panel-alt);}
#plTabel td.pl-nm{cursor:pointer;}
#plTabel thead th.pl-urut{cursor:pointer; user-select:none;}
#plTabel thead th.pl-urut:hover{color:var(--accent-strong);}
#plTabel thead th.pl-urut.on{background:var(--accent-soft); color:var(--accent-strong); box-shadow:inset 0 -3px 0 var(--accent);}
#plTabel td.pl-nm b{display:block; font:600 12px/1.15 'Inter',sans-serif; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text);}
#plTabel td.pl-nm span{display:block; font:400 10px/1.1 'JetBrains Mono',monospace; color:var(--text-muted);}
#plTabel tr.pl-buka td.pl-nm b, #plTabel td.pl-nm:hover b{color:var(--accent-strong);}
#plTabel tr.pl-hariini td.pl-nm{background:#D6E8F7; box-shadow:inset 4px 0 0 var(--info);}
#plTabel tr.pl-sub td.pl-nm{padding-left:26px; background:var(--panel-alt); cursor:default;}
#plTabel tr.pl-sub.pl-hariini td.pl-nm{background:#D6E8F7;}
#plTabel tbody tr:nth-child(even) td{background:none;}
#plTabel tbody tr:nth-child(even) td.pl-nm{background:var(--panel);}
#plTabel tbody tr:nth-child(even).pl-hariini td.pl-nm{background:#D6E8F7;}
#plTabel tbody tr:hover td{background:none;}
#plTabel tbody tr:hover td.pl-nm{background:var(--panel-alt);}
#plTabel tbody tr:hover.pl-hariini td.pl-nm{background:#D6E8F7;}
#plTabel tbody tr:hover td.k1{background:#D3EBDD;} #plTabel tbody tr:hover td.k2{background:#F6EBAE;}
#plTabel tbody tr:hover td.k3{background:#F3C27A;} #plTabel tbody tr:hover td.k4{background:var(--danger);}
#plTabel tbody tr:nth-child(even) td.k1{background:#D3EBDD;} #plTabel tbody tr:nth-child(even) td.k2{background:#F6EBAE;}
#plTabel tbody tr:nth-child(even) td.k3{background:#F3C27A;} #plTabel tbody tr:nth-child(even) td.k4{background:var(--danger);}
#plTabel td.pl-c.pl-td::after{content:""; position:absolute; top:0; right:0; border-style:solid; border-width:0 11px 11px 0; border-color:transparent #1C6FB6 transparent transparent;}
#plTabel td.pl-c{position:relative; height:24px; min-width:78px; padding:1px 4px; white-space:nowrap; line-height:1.05;}
#plTabel .pl-v{font:500 12px 'JetBrains Mono',monospace;}
#plTabel .pl-v small{font-size:10.5px; opacity:.8; font-weight:400;}
#plTabel .pl-v.pl-ck{font-size:14px; font-weight:700; line-height:1;}
#plTabel .pl-a{font:400 10px 'JetBrains Mono',monospace; opacity:.95;}
#plTabel td.pl-z{color:var(--text-faint); font-family:'JetBrains Mono',monospace;}
#plTabel td.pl-last{color:var(--text-muted); font-size:12px;}
#plTabel td.pl-last.pl-lama{color:#7A4300; font-weight:600;}
#plTabel td.pl-kosong{padding:30px; color:var(--text-muted); text-align:center;}
.pl-note{color:var(--text-muted); font-size:12px; max-width:110ch; margin:10px 0 0;}
/* -- Posisi Lantai: filter buyer, lipatan, layar penuh, tampilan HP -- */
.pl-aksi{display:flex; gap:8px; flex-wrap:wrap;}
.pl-lipat > summary{display:none;}
.pl-f-buyer{position:relative; max-width:260px;}
#tab-posisi-lantai .pl-buyer-btn{width:100%; text-align:left; padding-left:10px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; background:var(--panel); color:var(--text); border:1px solid var(--border); font-weight:400; padding-right:26px; position:relative;}
.pl-buyer-btn > span{display:block; width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:left;}
.pl-buyer-btn::after{content:"\25BE"; position:absolute; right:10px; top:50%; transform:translateY(-50%); color:var(--text-muted);}
.pl-buyer-pop{position:fixed; z-index:620; overflow-y:auto; background:var(--panel); border:1px solid var(--border-strong); border-radius:var(--radius); box-shadow:var(--shadow-md); padding:6px 0;}
.pl-buyer-pop label{display:flex; align-items:center; gap:8px; padding:7px 12px; margin:0; font-size:13px; font-weight:400; color:var(--text); cursor:pointer; text-transform:none; letter-spacing:0;}
.pl-buyer-pop label:hover{background:var(--panel-alt);}
.pl-buyer-pop label small{margin-left:auto; color:var(--text-muted); font-family:'JetBrains Mono',monospace;}
.pl-buyer-pop label.pl-b-semua{border-bottom:1px solid var(--border); font-weight:600;}
.pl-buyer-pop input{width:16px; height:16px; margin:0; flex:0 0 auto;}

/* layar penuh: panel menutup seluruh layar, hanya baris filter ringkas + tabel */
body.pl-kunci{overflow:hidden;}
#tab-posisi-lantai .panel.pl-penuh{position:fixed; inset:0; z-index:500; margin:0; border-radius:0; display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-rows:auto minmax(0,1fr); gap:6px 8px;
  padding:calc(6px + env(safe-area-inset-top,0px)) max(8px, env(safe-area-inset-right,0px)) calc(6px + env(safe-area-inset-bottom,0px)) max(8px, env(safe-area-inset-left,0px));}
.pl-penuh .panel-head{grid-column:2; grid-row:1; margin:0; padding:0; border:0; align-self:end;}
.pl-penuh .panel-head > div:first-child{display:none;}
.pl-penuh .panel-head button{padding:6px 10px; font-size:12px;}
.pl-penuh .pl-lipat, .pl-penuh .pl-note{display:none;}
.pl-penuh .filterbar{grid-column:1; grid-row:1; flex-wrap:nowrap; overflow-x:auto; gap:6px; margin:0; padding:6px 8px;}
.pl-penuh .pl-scroll{grid-column:1 / -1; grid-row:2;}
.pl-penuh > *{min-width:0;}
.pl-penuh .filterbar .field{flex:0 0 150px; min-width:0; max-width:none !important;}
.pl-penuh .filterbar .field > label{font-size:10px; margin-bottom:1px;}
.pl-penuh .filterbar input, .pl-penuh .filterbar select, #tab-posisi-lantai .pl-penuh .pl-buyer-btn{padding-top:4px; padding-bottom:4px; min-height:0; font-size:12px;}
.pl-penuh .pl-scroll{min-height:0; max-height:none;}
/* tombol aksi: teks di tampilan biasa, ikon saja di layar penuh (⟳ muat ulang, ✕ tutup di pojok kanan atas) */
.pl-aksi .pl-ikon{display:none;}
.pl-penuh .panel-head{align-self:start;}
.pl-penuh .pl-aksi{gap:6px; flex-wrap:nowrap;}
.pl-penuh .pl-aksi .pl-label{display:none;}
.pl-penuh .pl-aksi .pl-ikon{display:inline;}
#tab-posisi-lantai .pl-penuh .pl-aksi button{width:44px; height:44px; min-height:44px; padding:0; display:inline-flex; align-items:center; justify-content:center; font-size:18px; line-height:1;}
.pl-penuh #plMuat{order:1;}
.pl-penuh #plPenuh{order:2;}
/* layar penuh di HP tegak: tombol di atas, filter di bawahnya */
@media (max-width:600px){
  #tab-posisi-lantai .panel.pl-penuh{grid-template-columns:minmax(0,1fr); grid-template-rows:auto auto minmax(0,1fr);}
  .pl-penuh .panel-head{grid-column:1; grid-row:1; justify-self:end;}
  .pl-penuh .filterbar{grid-row:2;}
  .pl-penuh .pl-scroll{grid-row:3;}
}

@media (max-width:768px){
  .pl-lipat > summary{display:list-item; cursor:pointer; font-size:12.5px; font-weight:600; color:var(--text-muted); padding:6px 0;}
  .pl-ringkas{grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px;}
  .pl-tile{padding:6px 8px;} .pl-tile b{font-size:18px;} .pl-tile span{font-size:11px;}
  #tab-posisi-lantai .filterbar{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:8px; padding:10px;}
  #tab-posisi-lantai .filterbar .field{max-width:none !important; min-width:0;}
  .pl-penuh .filterbar{display:flex !important;}
  .pl-penuh .filterbar .field{flex:0 0 132px;}
  .pl-scroll{max-height:calc(100vh - 120px);}
  #plTabel{min-width:0; font-size:11px;}
  #plTabel thead th{font-size:10px; padding:3px 3px; white-space:normal; line-height:1.15;}
  #plTabel th.pl-nm, #plTabel td.pl-nm{min-width:112px; max-width:112px; padding:1px 6px;}
  #plTabel td.pl-nm b{font-size:11px;}
  #plTabel td.pl-nm span{font-size:9px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  #plTabel tr.pl-sub td.pl-nm{padding-left:14px;}
  #plTabel td.pl-c{min-width:56px; padding:2px 3px; white-space:normal;}
  #plTabel .pl-v{font-size:11px; white-space:nowrap;} #plTabel .pl-v small{font-size:9px;}
  #plTabel .pl-a{font-size:9px;}
  #plTabel td.pl-last{font-size:10.5px; white-space:normal; min-width:54px;}
  .pl-note{font-size:11.5px;}
}
@media (pointer:coarse){ #plTabel td.pl-c{height:30px;} }
/* -- Posisi Lantai: popup perjalanan komponen & ringkasan SPK -- */
#plTabel tr.pl-sub td.pl-nm{cursor:pointer;}
#plTabel tr.pl-sub td.pl-nm span{color:var(--info);}
#plTabel tr.pl-sub td.pl-nm:hover b{color:var(--accent-strong); text-decoration:underline;}
.pl-ngw{font-style:normal; color:var(--danger); font-weight:700; margin-right:4px; font-family:'Inter',sans-serif;}
.pl-info{float:right; width:20px; height:20px; min-height:0; padding:0; margin:2px 0 0 4px; border-radius:50%; border:1px solid var(--border-strong); background:var(--panel); color:var(--info);
  font:700 italic 12px/18px Georgia,serif; text-align:center; cursor:pointer;}
.pl-info:hover{background:var(--info); color:#fff;}
@media (pointer:coarse){ .pl-info{width:24px; height:24px; line-height:22px;} }

.pl-pop-bg{position:fixed; inset:0; z-index:650; background:rgba(0,0,0,.45); display:flex; align-items:center; justify-content:center; padding:16px;}
.pl-pop{background:var(--panel); color:var(--text); border-radius:var(--radius-lg); width:100%; max-width:640px; max-height:calc(100vh - 32px); display:flex; flex-direction:column; box-shadow:var(--shadow-md); overflow:hidden;}
.pl-pop-hd{display:flex; align-items:center; justify-content:space-between; gap:8px; padding:10px 14px; border-bottom:1px solid var(--border); background:var(--panel-alt);}
.pl-pop-hd b{font-size:14px;}
.pl-pop-x{min-height:0; padding:4px 10px; font-size:15px; line-height:1;}
.pl-pop-isi{overflow-y:auto; padding:12px 14px 16px; -webkit-overflow-scrolling:touch;}
@media (max-width:600px){
  .pl-pop-bg{align-items:flex-end; padding:0;}
  .pl-pop{max-width:none; max-height:92vh; border-radius:16px 16px 0 0; padding-bottom:env(safe-area-inset-bottom,0px);}
}
.pl-muted{color:var(--text-muted); font-size:12px;}
.pl-ket{margin:10px 0 0; line-height:1.45;}
.pl-err{color:var(--danger);}
.pl-ok{color:#14603A; font-weight:600;}
.pl-pk{display:flex; flex-direction:column; gap:2px; margin-bottom:10px;}
.pl-pk b{font-size:16px;}
.pl-pk span{font-size:12px; color:var(--text-muted);}
.pl-warn{background:#FBE3E1; color:#8A1C14; border:1px solid #F0B4AE; border-radius:var(--radius); padding:8px 10px; font-size:12.5px; margin:8px 0;}

/* diagram vertikal */
.pl-tl{list-style:none; margin:10px 0 0; padding:0;}
.pl-tl-i{position:relative; padding:0 0 14px 24px; border-left:3px solid var(--border-strong); margin-left:8px;}
.pl-tl-i:last-child{border-left-color:transparent;}
.pl-tl-i.kosong{border-left-style:dashed;}
.pl-tl-dot{position:absolute; left:-10px; top:2px; width:15px; height:15px; border-radius:50%; background:#1C6FB6; border:3px solid var(--panel); box-shadow:0 0 0 1px var(--border-strong);}
.pl-tl-i.k1 .pl-tl-dot{background:#2E9E5B;} .pl-tl-i.k2 .pl-tl-dot{background:#D9B300;}
.pl-tl-i.k3 .pl-tl-dot{background:#E08A00;} .pl-tl-i.k4 .pl-tl-dot{background:var(--danger);}
.pl-tl-i.kosong .pl-tl-dot{background:var(--panel); box-shadow:0 0 0 2px var(--border-strong);}
.pl-tl-i.kosong .pl-tl-h b, .pl-tl-i.kosong .pl-tl-q{color:var(--text-faint);}
.pl-tl-dur{display:inline-block; font:500 11px 'JetBrains Mono',monospace; padding:1px 6px; border-radius:4px; margin:0 0 4px -2px; background:var(--panel-alt); color:var(--text-muted);}
.pl-tl-dur.k1{background:#D3EBDD; color:#14603A;} .pl-tl-dur.k2{background:#F6EBAE; color:#6B5600;}
.pl-tl-dur.k3{background:#F3C27A; color:#7A4300;} .pl-tl-dur.k4{background:var(--danger); color:#fff;}
.pl-tl-h{display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;}
.pl-tl-h b{font-size:14px;}
.pl-tl-q{margin-left:auto; font:600 13px 'JetBrains Mono',monospace;}
.pl-tl-q small{font-weight:400; color:var(--text-muted); font-size:11px;}
.pl-tl-m{font-size:12px; color:var(--text-muted); margin-top:2px;}
.pl-tl-ng{font-size:12px; margin-top:3px; color:var(--text-muted);}
.pl-tl-ng.sisa{color:#8A1C14;}
.pl-tl-rinci{margin-top:4px;}
.pl-tl-rinci > summary, .pl-hr > summary{cursor:pointer; font-size:12px; color:var(--info); padding:4px 0;}
.pl-hr{margin-left:6px;}
.pl-hr > summary{color:var(--text); display:list-item;}
.pl-hr > summary span{display:inline-block; min-width:92px; color:var(--text-muted);}
.pl-hr > summary small{color:var(--text-faint); margin-left:6px;}
.pl-in{list-style:none; margin:2px 0 6px 14px; padding:0; border-left:1px dashed var(--border); }
.pl-in li{display:flex; flex-wrap:wrap; align-items:center; gap:2px 8px; padding:5px 0 5px 10px; font-size:12px; border-bottom:1px solid var(--border);}
.pl-in li:last-child{border-bottom:0;}
.pl-in-j{font-family:'JetBrains Mono',monospace; color:var(--text-muted); min-width:38px;}
.pl-in-q em{color:#8A1C14; font-style:normal; font-weight:600;}
.pl-in-o{color:var(--text-muted); flex:1 1 100%; padding-left:46px;}
.pl-in-lapor{margin-left:auto; min-height:0; padding:3px 8px; font-size:11px; border:1px solid var(--border-strong); background:var(--panel); color:var(--text-muted); border-radius:12px;}
.pl-in-lapor:hover{color:var(--danger); border-color:var(--danger);}
.pl-lq{flex:1 1 100%; display:flex; flex-direction:column; gap:6px; background:var(--panel-soft); border:1px solid var(--border); border-radius:var(--radius); padding:10px; margin:6px 0 2px;}
.pl-lq label{display:flex; flex-direction:column; gap:2px; font-size:11.5px; color:var(--text-muted); margin:0;}
.pl-lq-r{display:flex; gap:8px; flex-wrap:wrap;}
.pl-lq-r > label{flex:1 1 120px;}
.pl-lq-kirim{background:var(--accent); color:#241A06; border-color:var(--accent); font-weight:600;}

/* ringkasan SPK */
.pl-kv{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin:4px 0 8px;}
.pl-kv > div{background:var(--panel-soft); border:1px solid var(--border); border-radius:var(--radius); padding:6px 8px; min-width:0;}
.pl-kv span{display:block; font-size:10.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--text-muted);}
.pl-kv b{display:block; font-size:13px;}
.pl-kv small{font-size:11px; color:var(--text-muted);}
.pl-kv small.telat{color:var(--danger); font-weight:600;}
@media (max-width:480px){ .pl-kv{grid-template-columns:1fr;} }
.pl-sub-h{margin:14px 0 6px; font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--text-muted);}
.pl-prog{display:flex; flex-direction:column; gap:5px;}
.pl-prog-r{display:grid; grid-template-columns:110px minmax(0,1fr) 42px 104px; align-items:center; gap:8px; font-size:12px;}
.pl-prog-r small{text-align:right; color:var(--text-muted); font-family:'JetBrains Mono',monospace; font-size:10.5px; white-space:nowrap;}
.pl-prog-r b{font-family:'JetBrains Mono',monospace; text-align:right;}
.pl-prog-t{height:10px; background:var(--panel-alt); border-radius:5px; overflow:hidden; border:1px solid var(--border);}
.pl-prog-t i{display:block; height:100%; background:#1C6FB6;}
.pl-prog-t i.k1{background:#2E9E5B;} .pl-prog-t i.k2{background:#D9B300;} .pl-prog-t i.k3{background:#E08A00;} .pl-prog-t i.k4{background:var(--danger);}
@media (max-width:480px){ .pl-prog-r{grid-template-columns:86px minmax(0,1fr) 38px;} .pl-prog-r small{display:none;} }
.pl-hb{list-style:none; margin:0; padding:0;}
.pl-hb li{display:flex; flex-direction:column; gap:1px; padding:7px 8px; border:1px solid var(--border); border-radius:var(--radius); margin-bottom:5px; cursor:pointer; font-size:12px;}
.pl-hb li:hover{border-color:var(--info);}
.pl-hb li b{font-size:13px;}
.pl-hb li span{color:var(--text-muted);}
.pl-hb li span.lama{color:#7A4300; font-weight:600;}

/* ===== KOREKSI DATA (koreksi.js) =====
   Awalan .kd- supaya tidak bentrok dengan aturan umum. Dibuka dari dua tempat:
   tombol "Data salah? Laporkan" di Input Lapangan (lembar bawah .kd-bawah) dan tab Produksi > Koreksi Data. */
#tab-input-lapangan .fl-btnrow{display:flex; gap:8px; align-items:stretch;}
#tab-input-lapangan .fl-btnrow .fl-btn{width:auto; flex:1;}
#tab-input-lapangan .fl-btnrow .fl-btn.ok{flex:1.6;}
#tab-input-lapangan .fl-btnrow .fl-btn.lapor{background:#fff; color:var(--danger); border:1.5px solid var(--danger); font-size:13.5px; line-height:1.2; padding:8px;}
.kd-muted{color:var(--text-muted); font-size:12px;}
.kd-grid{display:grid; grid-template-columns:1fr; gap:12px; margin-top:8px;}
@media(min-width:900px){.kd-grid{grid-template-columns:minmax(0,4fr) minmax(0,7fr);}}
.kd-col{min-width:0;}
.kd-card{background:var(--panel); border:1px solid var(--border); border-radius:var(--radius-lg); padding:14px; min-width:0;}
.kd-card h3,.kd-card h4{margin:0 0 4px;}
.kd-tools{display:flex; flex-wrap:wrap; gap:8px; align-items:center;}
.kd-tools select{min-height:var(--tap); padding:8px 10px;}
.kd-req{display:flex; flex-direction:column; gap:4px; width:100%; text-align:left; align-items:flex-start; background:var(--panel); border:1.5px solid var(--border); border-radius:11px; padding:11px; margin-bottom:8px; font-weight:400; min-height:0;}
.kd-req.on{border-color:var(--accent); background:var(--accent-soft);}
.kd-req b{font-size:14px;}
.kd-req .kd-t{display:flex; flex-wrap:wrap; gap:6px;}
.kd-req .kd-m{font-size:12px; color:var(--text-muted);}
.kd-pill{display:inline-block; border-radius:99px; padding:2px 9px; font-size:11px; font-weight:700; background:var(--panel-alt); color:var(--text-muted);}
.kd-pill.j-k{background:#DCEBF8; color:#1C6FB6;} .kd-pill.j-q{background:var(--accent-soft); color:var(--accent-strong);}
.kd-pill.j-p{background:rgba(194,47,38,.12); color:var(--danger);} .kd-pill.j-t{background:rgba(27,122,68,.14); color:var(--success);}
.kd-pill.j-h{background:#EEE6F7; color:#5B3A8C;}
.kd-hasil{border:1.5px solid var(--border-strong); border-radius:12px; padding:10px; margin-top:10px; background:var(--panel);}
.kd-hasil .kd-hd{display:flex; justify-content:space-between; gap:8px; font-weight:600; font-size:13px;}
.kd-hasil-t{width:100%; margin:8px 0 4px;}
.kd-hasil-t th, .kd-hasil-t td{text-align:center; padding:6px 4px;}
.kd-hasil-t tbody th{text-align:left; white-space:nowrap;}
.kd-hasil-t .kd-in{width:90px; max-width:100%; text-align:center;}
.kd-pill.s-Menunggu{background:#FBEBCB; color:var(--accent-strong);} .kd-pill.s-Selesai{background:rgba(27,122,68,.14); color:var(--success);}
.kd-pill.s-Ditolak{background:var(--panel-alt); color:var(--text-muted);} .kd-pill.e{background:var(--accent-soft); color:var(--accent-strong);}
.kd-lap{border:1.5px solid var(--info); background:#F7FAFD; border-radius:12px; padding:10px; margin-top:10px; display:grid; grid-template-columns:1fr 1fr; gap:8px;}
.kd-lap label{display:flex; flex-direction:column; gap:3px; font-size:11.5px; font-weight:600; color:var(--text-muted); min-width:0;}
.kd-lap .w2,.kd-lap .kd-hd,.kd-lap .kd-beda{grid-column:1/3;}
.kd-lap .kd-hd{display:flex; justify-content:space-between; gap:8px; flex-wrap:wrap; font-size:12px; font-weight:700; color:var(--info);}
.kd-lap input,.kd-lap select,.kd-lap textarea{min-height:42px; font-size:14px; padding:8px 10px; width:100%;}
.kd-lap textarea{min-height:56px;}
.kd-beda{font-size:12px; color:var(--accent-strong); background:var(--accent-soft); border-radius:8px; padding:6px 9px;}
.kd-foto,.kd-prev{max-width:100%; max-height:220px; border-radius:10px; border:1px solid var(--border);}
.kd-kc{display:grid; grid-template-columns:1fr; gap:10px; margin-top:10px;}
@media(min-width:1100px){.kd-kc{grid-template-columns:1fr 1fr;}}
.kd-kom{border:1.5px solid var(--border); border-radius:12px; padding:10px; background:var(--panel); display:flex; flex-direction:column; gap:8px; min-width:0;}
.kd-kom.ubah{border-color:var(--accent); background:#FFFBF4;}
.kd-h{display:flex; gap:8px; align-items:center; min-width:0;}
.kd-h input{flex:1; min-width:0; min-height:42px; font-weight:600; padding:8px 10px; font-size:14px;}
.kd-set{display:flex; align-items:center; border:1px solid var(--border-strong); border-radius:9px; overflow:hidden; flex:none;}
.kd-set button{width:40px; height:42px; min-height:0; border:0; border-radius:0; background:var(--panel-alt); font-size:18px; padding:0;}
.kd-set output{min-width:64px; text-align:center; font:600 14px 'JetBrains Mono',monospace; padding:0 6px; line-height:1.1;}
.kd-set output small{display:block; font:500 9px 'Inter',sans-serif; color:var(--text-faint);}
.kd-ps{display:flex; flex-wrap:wrap; gap:6px;}
.kd-ch{border:1.5px solid var(--border); background:var(--panel); border-radius:9px; padding:5px 8px; font-size:11.5px; font-weight:600; line-height:1.25; text-align:left; min-height:44px; display:inline-block; color:var(--text);}
.kd-ch i{display:block; font:500 10.5px 'JetBrains Mono',monospace; font-style:normal; color:var(--text-muted);}
span.kd-ch{cursor:default;}
.kd-ch.done{background:#DCEFE3; border-color:#9AD0AF;} .kd-ch.run{background:#DCEBF8; border-color:#9CC4E6;}
.kd-ch.over{background:rgba(194,47,38,.12); border-color:var(--danger);}
.kd-ch.off{background:var(--panel-alt); border-style:dashed; color:var(--text-faint); text-decoration:line-through;}
.kd-ch.new{border-style:dashed; border-color:var(--success); background:#DCEFE3;}
.kd-ch.plus{border-style:dashed; color:var(--info); min-width:44px; text-align:center; font-size:16px; text-decoration:none;}
.kd-addbox{margin-top:8px; padding:10px; background:var(--panel-soft); border:1px solid var(--border); border-radius:10px;}
.kd-dampak{background:var(--panel); border:1.5px solid var(--accent); border-radius:14px; padding:12px; margin-top:12px; scroll-margin-top:70px;}
.kd-dampak ul{margin:6px 0 0; padding-left:18px; font-size:13px;} .kd-dampak li{margin:2px 0;}
.kd-w{color:var(--danger); font-weight:600;}
.kd-kv{display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:8px; margin-top:8px;}
.kd-kv div{background:var(--panel-soft); border:1px solid var(--border); border-radius:9px; padding:6px 9px;}
.kd-kv b{display:block; font:600 16px 'JetBrains Mono',monospace;} .kd-kv span{font-size:11px; color:var(--text-muted);}
.kd-cak{display:flex; flex-direction:column; gap:6px; margin-top:10px; font-size:13px;}
.kd-cak label{display:flex; gap:8px; align-items:flex-start; cursor:pointer;}
.kd-cak input{width:20px; height:20px; accent-color:var(--accent); flex:none; margin-top:1px;}
.kd-row{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px;}
.kd-btn{border:1px solid var(--border-strong); background:var(--panel-alt); border-radius:10px; padding:10px 14px; font-size:14px; font-weight:700; min-height:var(--tap); color:var(--text);}
.kd-btn.kd-pri{background:var(--accent); border-color:var(--accent-strong); color:#1A1305;}
.kd-btn.kd-ok{background:var(--success); border-color:var(--success); color:#fff;}
.kd-btn.kd-bad{background:#fff; border-color:var(--danger); color:var(--danger);}
.kd-btn:disabled{opacity:.45;}
/* STANDAR LOADING (ui-sibuk.js): tombol berubah jadi animasi putar + teks selama pekerjaan berjalan */
.btn-sibuk, .btn-sibuk:disabled{opacity:1; cursor:progress; display:inline-flex; align-items:center; justify-content:center; gap:8px;}
.spin{width:16px; height:16px; border-radius:50%; border:2.5px solid currentColor; border-right-color:transparent; animation:putarSpin .7s linear infinite; flex:none; display:inline-block;}
@keyframes putarSpin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){.spin{animation-duration:2s;}}

/* Pusat notifikasi (notif.js) */
.nt-wadah{position:relative; flex:none;}
.nt-bell{position:relative; background:transparent; border:1px solid var(--border); border-radius:10px; width:var(--tap, 44px); height:var(--tap, 44px); display:inline-flex; align-items:center; justify-content:center; color:var(--text-muted); padding:0;}
.nt-bell.ada{color:var(--accent);}
.nt-badge{position:absolute; top:-6px; right:-6px; min-width:20px; height:20px; padding:0 5px; border-radius:999px; background:var(--danger); color:#fff; font-size:11px; font-weight:800; line-height:20px; text-align:center;}
.nt-badge[hidden]{display:none;}
.nt-panel{position:absolute; right:0; top:calc(100% + 8px); width:min(360px, calc(100vw - 24px)); max-height:70vh; overflow:auto; background:var(--panel); border:1px solid var(--border-strong, var(--border)); border-radius:12px; box-shadow:0 12px 32px rgba(0,0,0,.35); z-index:80;}
.nt-panel[hidden]{display:none;}
.nt-kepala{display:flex; align-items:center; justify-content:space-between; padding:10px 12px; border-bottom:1px solid var(--border); position:sticky; top:0; background:var(--panel);}
.nt-kepala .ghost{font-size:12px; padding:6px 10px; min-height:0;}
.nt-item{display:block; width:100%; text-align:left; background:transparent; border:0; border-bottom:1px solid var(--border); padding:12px; color:var(--text); border-radius:0; min-height:var(--tap, 44px);}
.nt-item.aksi{border-left:4px solid var(--accent);}
.nt-item.baca{opacity:.6;}
.nt-judul{display:block; font-weight:700; font-size:14px;}
.nt-isi{display:block; font-size:13px; color:var(--text-muted); margin-top:2px;}
.nt-waktu{display:block; font-size:11px; color:var(--text-muted); margin-top:4px;}
.nt-kosong{padding:18px 12px; text-align:center; color:var(--text-muted); font-size:13px; margin:0;}
.nt-menu{display:inline-block; margin-left:8px; min-width:20px; padding:0 6px; border-radius:999px; background:var(--danger); color:#fff; font-size:11px; font-weight:800; line-height:20px; text-align:center; vertical-align:middle;}
.kd-uji{margin-top:10px; padding:9px 11px; border-radius:9px; background:#DCEFE3; color:#14603A; font-size:13px; font-weight:600;}
.kd-uji.gagal{background:rgba(194,47,38,.12); color:var(--danger);}
.kd-tolak{margin-top:8px; padding:10px; border:1px solid var(--border); border-radius:10px; background:var(--panel-soft);}
.kd-tolak label{display:flex; flex-direction:column; gap:4px; font-size:12px; font-weight:600; color:var(--text-muted);}
.kd-tolak input{padding:9px 10px; min-height:42px;}
.kd-selesai{margin-top:12px; padding:12px; border:1px solid var(--border); border-radius:12px; background:var(--panel-soft);}
.kd-selesai ul{margin:6px 0 0; padding-left:18px; font-size:13px;}
.kd-log{white-space:pre-wrap; font-size:11.5px; color:var(--text-muted); margin:6px 0 0;}
.kd-stat{display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:8px; margin:8px 0;}
.kd-stat div{background:var(--panel-soft); border:1px solid var(--border); border-radius:12px; padding:10px 12px;}
.kd-stat b{display:block; font:600 22px 'JetBrains Mono',monospace;} .kd-stat span{font-size:12px; color:var(--text-muted);}
.kd-grid2{display:grid; grid-template-columns:1fr; gap:12px; margin-bottom:12px;}
@media(min-width:800px){.kd-grid2{grid-template-columns:1fr 1fr;}}
.kd-bar-r{display:grid; grid-template-columns:150px 1fr 34px; gap:8px; align-items:center; font-size:13px; margin:7px 0;}
.kd-bar-r .tr{background:var(--panel-alt); border-radius:7px; overflow:hidden; display:block;}
.kd-bar-r i{display:block; height:14px; background:var(--accent); min-width:3px; border-radius:7px;}
.kd-bar-r b{font:600 13px 'JetBrains Mono',monospace; text-align:right;}
@media(max-width:480px){.kd-bar-r{grid-template-columns:104px 1fr 28px; font-size:12px;}}
.kd-tbl{width:100%; border-collapse:collapse; font-size:13px;} .kd-tbl th,.kd-tbl td{padding:7px 6px; border-bottom:1px solid var(--border); text-align:left;}
/* bar aksi tipis di bawah layar: hanya tampil saat tab Koreksi Data aktif */
.kd-bar{display:none; position:fixed; left:0; right:0; bottom:0; z-index:35; background:var(--panel); border-top:2px solid var(--accent); padding:8px 14px calc(8px + env(safe-area-inset-bottom,0px)); gap:8px; align-items:center; box-shadow:0 -4px 14px rgba(16,24,40,.18);}
#tab-koreksi-data.active .kd-bar:not([hidden]){display:flex;}
.kd-bar .kd-ring{flex:1; min-width:0; font-size:12.5px; font-weight:600; line-height:1.25;}
.kd-bar .kd-ring small{display:block; font:500 11px 'JetBrains Mono',monospace; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
#tab-koreksi-data{padding-bottom:84px;}
/* form lapor (lembar bawah) */
.kd-bg{position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:300; display:flex; justify-content:center; overflow-y:auto;}
.kd-bg.kd-bawah{align-items:flex-end; padding:0;}
.kd-sheet{background:var(--panel); border-radius:16px 16px 0 0; width:100%; max-width:560px; padding:16px; max-height:92vh; overflow-y:auto;}
.kd-sheet h3{margin:0 0 4px; font-size:17px;}
.kd-pre{background:var(--panel-soft); border:1px solid var(--border); border-radius:10px; padding:8px 10px; font-size:13px; margin:8px 0;}
.kd-pre div{display:flex; justify-content:space-between; gap:10px; padding:2px 0;} .kd-pre span{color:var(--text-muted);} .kd-pre b{text-align:right;}
.kd-f{display:flex; flex-direction:column; gap:5px; font-size:12px; font-weight:600; color:var(--text-muted); margin-top:12px;}
.kd-f select,.kd-f input[type=text],.kd-f input[type=number],.kd-f textarea{padding:11px 12px; min-height:46px; font-size:15px;}
.kd-f textarea{min-height:70px;}
.kd-f b{color:var(--text);}
.kd-opt{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:6px;}
.kd-opt label{display:flex; align-items:center; gap:8px; border:1.5px solid var(--border); border-radius:10px; padding:10px; font-size:13px; font-weight:600; line-height:1.25; cursor:pointer; min-height:48px; color:var(--text);}
.kd-opt input{accent-color:var(--accent); width:18px; height:18px; flex:none;}
.kd-opt label:has(input:checked){border-color:var(--accent); background:var(--accent-soft);}
.kd-cak label,.kd-opt label,.kd-f,.kd-tolak label{text-transform:none; letter-spacing:normal;}
.kd-cak label{font-size:13px; font-weight:400; color:var(--text);}
.kd-opt label{color:var(--text);}

/* Koreksi Cepat berbentuk tabel seperti Kelola CT (kelas .mtx dipakai ulang); daftar laporan di atas */
.kd-grid{grid-template-columns:1fr !important;}
#kdDaftar{display:grid; grid-template-columns:repeat(auto-fill,minmax(310px,1fr)); gap:8px; max-height:250px; overflow:auto;}
#kdDaftar .kd-req{margin-bottom:0;}
.kd-scroll{overflow-x:auto; margin-top:10px;}
.kd-scroll .mtx-bungkus{overflow:visible; min-width:max-content;}
table.kd-mtx{width:auto; min-width:100%;}
table.kd-mtx th.mtx-komp{width:210px; min-width:170px; max-width:260px;}
.kd-in{width:100%; min-height:30px; padding:2px 6px; font-size:12.5px; font-weight:600; border:1px solid var(--border-strong); border-radius:6px; background:var(--panel); color:var(--text);}
.kd-qty{width:58px; text-align:center; font-family:'JetBrains Mono',monospace; padding:2px 2px;}
.kd-in.kd-ubah{background:rgba(196,138,22,.18); border-color:var(--accent);}
.kd-hs{display:block; font:500 9px/1 'JetBrains Mono',monospace; color:var(--text-muted); margin-top:1px;}
/* kepala tabel Koreksi Cepat tidak menempel ke atas halaman (tabelnya ada di dalam wadah geser) */
table.kd-mtx > thead > tr > th{top:auto !important;}

.kd-jadwal{margin:8px 0 0; padding:7px 10px; border-radius:9px; font-size:13px;}
.kd-jadwal.tidak{background:#DCEFE3; color:#14603A;}
.kd-jadwal.ya{background:var(--accent-soft); color:var(--accent-strong);}

/* Bar aksi Koreksi menempel di bawah: tombol Asisten naik ke atasnya supaya tidak menutup Dampak / Periksa / Konfirmasi */
body:has(#tab-koreksi-data.active .kd-bar:not([hidden])) .chat-fab{bottom:calc(78px + env(safe-area-inset-bottom,0px));}
#kdDaftar{grid-template-columns:repeat(auto-fill,minmax(min(310px,100%),1fr));}
/* HP: kolom rincian (Part No, Material, W/D/H) disembunyikan supaya centang proses langsung terlihat tanpa geser jauh */
@media (max-width:700px){
  .kd-rinci{display:none;}
  table.kd-mtx td.mtx-no, table.kd-mtx th.mtx-no{width:28px; min-width:28px; padding:3px 4px;}
  table.kd-mtx th.mtx-komp{left:28px; width:156px; min-width:156px; max-width:156px; padding:3px 4px;}
  table.kd-mtx th.mtx-komp .kd-in{padding:2px 5px;}
  .kd-kv{grid-template-columns:1fr 1fr;}
  .kd-bar{padding-left:10px; padding-right:10px; gap:6px;}
  .kd-bar .kd-btn{padding:10px 11px; font-size:13px;}
  body:has(#tab-koreksi-data.active .kd-bar:not([hidden])) .chat-fab{padding:0; width:48px; justify-content:center;}
  body:has(#tab-koreksi-data.active .kd-bar:not([hidden])) .chat-fab-tx{display:none;}
}
@media (max-width:480px){
  .kd-lap{grid-template-columns:1fr;}
  .kd-lap .w2,.kd-lap .kd-hd,.kd-lap .kd-beda{grid-column:auto;}
}

/* ===== VISUAL LANTAI MESIN (tab denah-lantai, public/denah-lantai.js) ===== */
#tab-denah-lantai{
  --dl-ok:#1B7A44; --dl-ok-soft:#CFEBD9; --dl-blue:#1C6FB6; --dl-blue-soft:#CFE3F5;
  --dl-warn:#D9830A; --dl-warn-soft:#FBE3B0; --dl-bad:#C22F26; --dl-bad-soft:#F6CFCB; --dl-idle:#8A929C; --dl-idle-soft:#E6E9ED;
  --dl-mono:ui-monospace,Consolas,monospace;
}
#tab-denah-lantai [hidden]{display:none!important}
.dl-aksi{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.dl-aksi select{min-height:36px}
.dl-stat{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.dl-sb{display:flex;align-items:center;gap:8px;border:1px solid var(--border);background:var(--panel);border-radius:8px;padding:5px 10px;cursor:pointer;font-size:12px;font-weight:500;color:var(--text);min-height:36px}
.dl-sb b{font:600 16px var(--dl-mono)}
.dl-sb i{width:11px;height:11px;border-radius:50%;background:var(--c)}
.dl-sb[aria-pressed="true"]{border-color:var(--c);box-shadow:0 0 0 2px var(--c) inset}
.dl-tools{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:6px}
.dl-tools button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent-strong);color:#1A1305}
.dl-tools input[type=range]{width:100px;accent-color:var(--accent)}
.dl-sw{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--text-muted)}
.dl-lipat summary{cursor:pointer;font-weight:600;font-size:13px;padding:4px 0}
.dl-lyr{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:12px;color:var(--text-muted);align-items:center;padding:4px 0 8px}
.dl-lyr label{display:inline-flex;gap:4px;align-items:center;cursor:pointer}
.dl-board{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:12px;align-items:start}
@media(max-width:900px){.dl-board{grid-template-columns:1fr}.dl-view{height:min(70vh,110vw)!important;min-height:320px!important}}
.dl-view{position:relative;height:min(74vh,860px);min-height:380px;overflow:hidden;background:#fff;border:1px solid var(--border);border-radius:10px;touch-action:none;cursor:grab}
.dl-view.pan{cursor:grabbing}
.dl-stage{position:absolute;left:0;top:0;transform-origin:0 0}
.dl-stage svg{display:block;overflow:visible}
.dl-zoom{position:absolute;right:10px;bottom:10px;display:flex;flex-direction:column;gap:6px;z-index:5}
.dl-zoom button{width:40px;height:40px;border-radius:8px;border:1px solid var(--border-strong);background:var(--panel);font-size:18px;font-weight:600;cursor:pointer;color:var(--text);padding:0}
.dl-hint{position:absolute;left:10px;bottom:10px;z-index:5;background:rgba(255,255,255,.92);border:1px solid var(--border);border-radius:6px;padding:4px 8px;font-size:11px;color:var(--text-muted);max-width:62%}
.dl-fullbtn{position:absolute;right:10px;top:10px;z-index:5}
.dl-board.dl-full .dl-view{position:fixed;inset:0;height:auto!important;min-height:0!important;z-index:950;border-radius:0}
.dl-board.dl-full .dl-side{position:fixed;right:10px;top:58px;bottom:10px;width:310px;overflow:auto;z-index:960}
.dl-board.dl-full .dl-fullbtn{position:fixed;z-index:970}
.dl-board.dl-full .dl-zoom,.dl-board.dl-full .dl-hint{position:fixed;z-index:960}
@media(max-width:900px){.dl-board.dl-full .dl-side{display:none}}
/* bentuk di denah */
.dl-it{cursor:pointer}
.dl-it .pad{fill:var(--panel);stroke:var(--text-faint);stroke-width:1.2;vector-effect:non-scaling-stroke;opacity:0}
.dl-it.mesin .pad{opacity:1;fill:var(--dl-idle-soft);stroke:var(--dl-idle);stroke-width:2}
.dl-it.mesin.bebas .pad{stroke-dasharray:5 3;fill:var(--panel)}
.dl-it.edit .pad{opacity:1;stroke-dasharray:6 3;stroke:var(--info)}
.dl-it.s-jalan .pad{fill:var(--dl-ok-soft);stroke:var(--dl-ok)}
.dl-it.s-tercapai .pad{fill:var(--dl-blue-soft);stroke:var(--dl-blue)}
.dl-it.s-berhenti .pad{fill:var(--dl-warn-soft);stroke:var(--dl-warn)}
.dl-it.s-belum .pad{fill:var(--dl-bad-soft);stroke:var(--dl-bad)}
.dl-it.s-siap .pad{fill:var(--panel);stroke:var(--dl-warn);stroke-dasharray:6 3}
.dl-it.s-kosong .pad{fill:var(--dl-idle-soft);stroke:var(--dl-idle)}
.dl-it.dim{opacity:.18}
.dl-it.sel .pad{stroke:var(--info);stroke-width:4;opacity:1}
@keyframes dl-denyut{0%,100%{stroke-width:2}50%{stroke-width:6}}
@keyframes dl-kedip-a{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes dl-kedip-m{0%,100%{opacity:1}50%{opacity:.25}}
.dl-it.s-jalan:not(.sel) .pad{animation:dl-denyut 1.8s infinite}
.dl-it.s-berhenti:not(.sel) .pad{animation:dl-kedip-a 1.3s infinite}
.dl-it.s-belum:not(.sel) .pad{animation:dl-kedip-m .9s infinite;stroke-width:3}
@media (prefers-reduced-motion:reduce){.dl-it .pad{animation:none!important}.dl-it.s-belum .pad{stroke-width:5}.dl-it.s-berhenti .pad{stroke-width:4}}
/* nama mesin: HTML supaya tetap terbaca di semua zoom */
.dl-lb{position:absolute;transform:translate(-50%,0) scale(var(--k,1));transform-origin:50% 0;white-space:nowrap;pointer-events:none;background:rgba(255,255,255,.94);border:1px solid var(--c,var(--border-strong));border-left-width:4px;border-radius:5px;padding:1px 6px;font-size:10px;font-weight:600;line-height:1.3;color:var(--text);z-index:3;display:none}
.dl-lb.on{display:block}
.dl-lb.s-jalan{--c:var(--dl-ok)} .dl-lb.s-tercapai{--c:var(--dl-blue)} .dl-lb.s-berhenti{--c:var(--dl-warn)}
.dl-lb.s-belum{--c:var(--dl-bad)} .dl-lb.s-siap{--c:var(--dl-warn)} .dl-lb.s-kosong{--c:var(--dl-idle)}
.dl-lb.dim{opacity:.18}
.dl-lb.sel{z-index:6;box-shadow:0 0 0 2px var(--info)}
/* panel samping */
.dl-side{display:flex;flex-direction:column;gap:10px;min-width:0}
.dl-card{background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:12px}
.dl-card h4{font-size:15px;margin:0 0 4px}
.dl-card h5{grid-column:1/-1;margin:6px 0 0;font-size:11px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em}
.dl-kv{display:grid;grid-template-columns:auto 1fr;gap:3px 12px;font-size:12px;margin-top:8px}
.dl-kv span:nth-child(odd){color:var(--text-muted)}
.dl-kv span:nth-child(even){text-align:right;font-family:var(--dl-mono)}
.dl-kv span.teks{font-family:inherit}
.dl-pill{display:inline-block;border-radius:99px;padding:2px 10px;font-weight:700;font-size:11px;background:var(--c);color:#fff}
.dl-pill.s-jalan{--c:var(--dl-ok)} .dl-pill.s-tercapai{--c:var(--dl-blue)} .dl-pill.s-berhenti{--c:var(--dl-warn)}
.dl-pill.s-belum{--c:var(--dl-bad)} .dl-pill.s-siap{--c:var(--dl-warn)} .dl-pill.s-kosong{--c:var(--dl-idle)}
.dl-big{height:10px;border-radius:5px;background:var(--dl-idle-soft);overflow:hidden;margin-top:8px}
.dl-big i{display:block;height:100%;background:var(--accent)}
.dl-sub{margin-top:8px;font-weight:600;font-size:12px}
.dl-job{border-top:1px solid var(--border);padding:7px 0;font-size:12px}
.dl-job b{display:block}
.dl-job span{color:var(--text-muted);font-family:var(--dl-mono);font-size:11px}
.dl-small{font-size:11px;color:var(--text-muted);margin:6px 0 0}
.dl-leg{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:12px;color:var(--text-muted)}
.dl-leg span::before{content:"";display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--c);margin-right:5px}
.dl-ed{display:grid;grid-template-columns:1fr 1fr;gap:6px 8px;margin-top:10px;font-size:12px}
.dl-ed label{display:flex;flex-direction:column;gap:2px;color:var(--text-muted)}
.dl-ed input,.dl-ed select{min-width:0;width:100%}
.dl-ed .full{grid-column:1/3}
.dl-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.dl-row button{min-height:32px;padding:5px 9px;font-size:12px}
.dl-row button.dl-bahaya{color:var(--danger);border-color:var(--danger);background:#fff}
.dl-invg{display:grid;grid-template-columns:repeat(auto-fill,minmax(74px,1fr));gap:6px;margin-top:8px;max-height:260px;overflow:auto}
.dl-invg button{display:flex;flex-direction:column;align-items:center;gap:3px;background:#fff;border:1px solid var(--border);border-radius:6px;padding:5px 3px;cursor:pointer;font-size:9.5px;line-height:1.15;color:var(--text);min-height:0}
.dl-invg button svg{width:62px;height:38px}

/* ===== STANDAR TOMBOL TUTUP (✕) =====
   Semua tombol ✕ untuk menutup popup / panel / layar penuh memakai kelas .tombol-tutup: merah, ikon putih.
   (Bukan untuk tombol hapus baris dan bukan × kecil di bar tab yang dibuka.) */
button.tombol-tutup{background:var(--danger); color:#fff; border:1px solid var(--danger); border-radius:8px; font-weight:700; line-height:1;}
button.tombol-tutup:hover, button.tombol-tutup:focus-visible{background:#9E2219; border-color:#9E2219; color:#fff;}
.ot-tutup{color:var(--danger);}

/* Posisi Lantai: tombol ukuran tabel, nama barang dua baris rapi, tombol ⓘ kecil */
#tab-posisi-lantai .pl-aksi .pl-zoom{min-width:40px; padding-left:0; padding-right:0; font-size:18px; font-weight:700; line-height:1;}
#plTabel td.pl-nm span{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:1.3;}
#plTabel td.pl-nm b{margin-bottom:1px;}
.pl-info{width:15px; height:15px; margin:1px 0 0 3px; font-size:10px; line-height:13px;}
@media (pointer:coarse){ .pl-info{width:18px; height:18px; line-height:16px;} }
/* Posisi Lantai layar penuh: baris atas ramping (tanpa label & kotak), tombol ikon kecil -> data lebih ke atas */
#tab-posisi-lantai .pl-penuh .pl-aksi button{width:32px; height:32px; min-height:32px; font-size:14px; border-radius:7px;}
#tab-posisi-lantai .pl-penuh .pl-aksi .pl-zoom{min-width:32px; font-size:16px;}
.pl-penuh .pl-aksi{gap:4px;}
#tab-posisi-lantai .panel.pl-penuh{gap:4px 6px; padding-top:calc(4px + env(safe-area-inset-top,0px)); padding-bottom:calc(4px + env(safe-area-inset-bottom,0px));}
.pl-penuh .filterbar{background:none; border:0; box-shadow:none; padding:0; gap:4px; align-items:center;}
.pl-penuh .filterbar .field > label{display:none;}   /* hanya judul field; pilihan buyer juga berupa label */
.pl-penuh .filterbar .field{flex:0 0 140px; margin:0;}
.pl-penuh .filterbar input, .pl-penuh .filterbar select, #tab-posisi-lantai .pl-penuh .pl-buyer-btn{height:32px; min-height:32px !important; padding-top:2px; padding-bottom:2px; font-size:12px !important; border-radius:7px;}
.pl-penuh .panel-head{align-self:center;}
/* Posisi Lantai: centang "hanya yang dikerjakan hari ini" (pengganti filter durasi) */
.pl-f-hariini{flex:0 0 auto !important; min-width:0 !important;}
#tab-posisi-lantai .pl-cek{display:inline-flex; align-items:center; gap:8px; min-height:40px; margin:0; padding:0 10px; border:1px solid var(--border); border-radius:var(--radius); background:var(--panel); color:var(--text); font-size:13px; font-weight:500; text-transform:none; letter-spacing:0; white-space:nowrap; cursor:pointer;}
#tab-posisi-lantai .pl-cek input{width:18px; height:18px; margin:0; accent-color:var(--accent-strong);}
#tab-posisi-lantai .pl-cek:has(input:checked){border-color:var(--info); background:#D6E8F7;}
.pl-penuh .pl-f-hariini{flex:0 0 auto !important;}
#tab-posisi-lantai .pl-penuh .pl-cek{display:inline-flex !important; height:32px; min-height:32px; padding:0 8px; font-size:12px; border-radius:7px;}
/* Posisi Lantai, tampilan "komponen yang dikerjakan hari ini": sel = PCS hari ini */
#plTabel tr.pl-hk td.pl-nm{cursor:pointer;}
#plTabel tr.pl-hk td.pl-nm:hover b{color:var(--accent-strong); text-decoration:underline;}
#plTabel td.pl-hi{background:#E3EFFA; color:#14456F;}
#plTabel td.pl-hi .pl-v{font-weight:700; font-size:13px;}
#plTabel td.pl-tot{background:#CFE2F5;}
/* Posisi Lantai, tampilan "komponen yang dikerjakan hari ini": sel = PCS hari ini */
#plTabel tr.pl-hk td.pl-nm{cursor:pointer;}
#plTabel tr.pl-hk td.pl-nm:hover b{color:var(--accent-strong); text-decoration:underline;}
#plTabel td.pl-hi{background:#E3EFFA; color:#14456F;}
#plTabel td.pl-hi .pl-v{font-weight:700; font-size:13px;}
#plTabel td.pl-tot{background:#CFE2F5;}
#plTabel tbody tr:nth-child(even) td.pl-hi, #plTabel tbody tr:hover td.pl-hi{background:#E3EFFA;}
#plTabel tbody tr:nth-child(even) td.pl-tot, #plTabel tbody tr:hover td.pl-tot{background:#CFE2F5;}

/* ===== Belajar CT (public/belajar-ct.js) — prefiks .bc- ===== */
.bc-tabs{display:flex; gap:6px; flex-wrap:wrap; margin:4px 0 12px;}
.bc-tab{background:var(--panel-soft); color:var(--text-muted); border:1px solid var(--border); border-radius:999px; padding:6px 14px; font-size:13px; font-weight:600; cursor:pointer;}
.bc-tab.aktif{background:var(--accent); color:#12161B; border-color:var(--accent);}
.bc-chips{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:8px;}
.bc-chip{display:inline-flex; gap:6px; padding:4px 12px; border-radius:999px; font-size:13px; border:1px solid var(--border); background:var(--panel-soft); color:var(--text-muted);}
.bc-chip b{color:var(--text);}
.bc-chip.ok{background:rgba(27,122,68,.14); color:var(--success); border-color:rgba(27,122,68,.32);}
.bc-chip.warn{background:rgba(224,135,15,.16); color:var(--accent-strong); border-color:rgba(224,135,15,.35);}
.bc-chip.err{background:rgba(194,47,38,.12); color:var(--danger); border-color:rgba(194,47,38,.32);}
.bc-catatan{font-size:12px; color:var(--text-muted); margin:0 0 8px;}
.bc-scroll{overflow-x:auto;}
.bc-tabel{width:100%; border-collapse:collapse; font-size:13px; min-width:900px;}
.bc-tabel th{text-align:left; padding:8px 10px; font-size:12px; color:var(--text-muted); border-bottom:1px solid var(--border-strong); white-space:nowrap;}
.bc-tabel td{padding:8px 10px; border-bottom:1px solid var(--border); vertical-align:top;}
.bc-tabel .num{text-align:right; white-space:nowrap;}
.bc-redup{color:var(--text-muted); font-size:12px;}
.bc-naik{color:var(--danger); font-weight:600;}
.bc-turun{color:var(--success); font-weight:600;}
.bc-ditolak td{opacity:.6;}
.bc-aksi{padding:3px 10px; font-size:12px;}

/* Pilihan sisi Edging di popup Input CT (public/app-lapangan.js) */
.ct-sisi{display:grid; grid-template-columns:1fr 1fr; gap:8px;}
.ct-sisi-btn{display:flex; flex-direction:column; align-items:flex-start; gap:2px; text-align:left; padding:10px 12px; background:var(--panel-soft); border:2px solid var(--border); border-radius:10px; color:var(--text); cursor:pointer;}
.ct-sisi-btn b{font-size:15px;}
.ct-sisi-btn span{font-size:18px; font-weight:700;}
.ct-sisi-btn small{font-size:12px; color:var(--text-muted);}
.ct-sisi-btn.dipilih{border-color:var(--accent); background:rgba(224,135,15,.16);}

/* Kepala kolom yang bisa diurutkan (Report Progres SPK) */
th.urut{cursor:pointer; user-select:none; white-space:nowrap;}
th.urut:hover{color:var(--accent);}

/* Belajar CT > Model Edging (belajar-ct-model.js) */
.bcm-intro{background:var(--panel-alt); border:1px solid var(--border); border-radius:10px; padding:10px 12px; font-size:13px; margin-bottom:12px;}
.bcm-kartu-baris{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:12px; margin-bottom:12px;}
.bcm-kartu{background:var(--panel-alt); border:1px solid var(--border); border-radius:10px; padding:12px;}
.bcm-kartu-kepala{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px;}
.bcm-param{display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:2px 8px; padding:4px 0; border-bottom:1px dashed var(--border); font-size:13px;}
.bcm-param span{color:var(--text-muted);}
.bcm-param small{flex-basis:100%; text-align:right; color:var(--text-muted); font-size:11px;}
.bcm-catatan{font-size:12px; color:var(--text-muted); margin:8px 0 0;}
.bcm-peringatan{border-left:4px solid var(--accent); background:var(--panel-alt); border-radius:8px; padding:10px 12px; font-size:13px; margin-bottom:12px;}
.bcm-judul{margin:16px 0 8px; font-size:15px;}
.bcm-grafik{width:100%; height:auto; max-height:340px; background:var(--panel-alt); border:1px solid var(--border); border-radius:10px;}
.bcm-kisi{stroke:var(--border); stroke-width:1;}
.bcm-tick{fill:var(--text-muted); font-size:11px;}
.bcm-pt-single{fill:var(--info); fill-opacity:.85;}
.bcm-pt-double{fill:var(--accent); fill-opacity:.9;}
.bcm-pt-pendek{fill:none; stroke:var(--text-muted); stroke-width:1.5; stroke-dasharray:2 2;}
.bcm-garis-single{stroke:var(--info); stroke-width:2;}
.bcm-garis-double{stroke:var(--accent); stroke-width:2; stroke-dasharray:6 4;}
.bcm-legenda{display:flex; flex-wrap:wrap; gap:6px 16px; font-size:12px; color:var(--text-muted); margin-top:6px;}
.bcm-legenda span{display:inline-flex; align-items:center; gap:6px;}
.bcm-sw{width:10px; height:10px; border-radius:50%; display:inline-block;}
.bcm-sw.single{background:var(--info);} .bcm-sw.double{background:var(--accent);} .bcm-sw.pendek{border:1.5px dashed var(--text-muted);}
.bcm-gs{width:18px; height:0; border-top:2px solid; display:inline-block;}
.bcm-gs.single{border-color:var(--info);} .bcm-gs.double{border-color:var(--accent); border-top-style:dashed;}
.bcm-bentuk{max-width:150px; font-size:13px;}