/* Dashboard Manajer Produksi (public/dashboard-produksi.js). Prefiks .dp-* */
#tab-dashboard-produksi{--dp-aktual:#1C6FB6; --dp-rencana:#E0870F;}

.dp-kepala .panel-head{align-items:flex-start;}
.dp-rentang{margin:4px 0 0; color:var(--text-muted);}
.dp-rentang strong{color:var(--text);}
.dp-segarkan{min-height:var(--tap); flex:none;}

.dp-preset{display:flex; flex-wrap:wrap; gap:8px;}
.dp-preset button{min-height:var(--tap); padding:0 14px; background:var(--panel); color:var(--text); border:1px solid var(--border-strong);}
.dp-preset button.aktif{background:var(--accent); color:#161C26; border-color:var(--accent-dim); font-weight:700;}
.dp-custom{display:flex; flex-wrap:wrap; align-items:flex-end; gap:10px; margin-top:12px;}
.dp-custom[hidden]{display:none;}
.dp-custom label{display:flex; flex-direction:column; gap:4px; font-size:13px; font-weight:600; color:var(--text-muted);}
.dp-custom input{min-height:var(--tap); box-sizing:border-box;}
.dp-custom button{min-height:var(--tap);}
.dp-galat{flex-basis:100%; margin:0; color:var(--danger); font-weight:600;}

.dp-memuat{display:flex; align-items:center; justify-content:center; gap:10px; padding:32px; color:var(--text-muted);}
.dp-galat-blok button{margin-top:10px; min-height:var(--tap);}
.dp-tolak{margin-top:12px;}
.dp-diperbarui{margin:10px 2px;}
.dp-catatan{color:var(--text-muted); font-size:13px; margin:4px 0 10px;}
.dp-peringatan{background:var(--accent-soft); color:var(--accent-strong); border-radius:var(--radius); padding:8px 10px;}
.dp-redup{color:var(--text-muted);}
.dp-kosong{padding:16px; margin-top:10px;}

.dp-bagian{margin-top:14px;}
.dp-bagian-kepala{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:4px 12px; margin-bottom:10px;}
.dp-bagian-kepala h3{margin:0;}
.dp-acuan{color:var(--text-muted); font-size:13px;}
.dp-sub{margin:16px 0 8px; font-size:14px;}

.dp-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(170px, 1fr)); gap:10px;}
.dp-kartu{background:var(--panel-soft); border:1px solid var(--border); border-radius:var(--radius); padding:10px 12px; min-width:0;}
.dp-kartu.dp-bahaya{border-left:4px solid var(--danger);}
.dp-kartu.dp-waspada{border-left:4px solid var(--accent);}
.dp-kartu.dp-baik{border-left:4px solid var(--success);}
.dp-kartu-label{font-size:13px; color:var(--text-muted); font-weight:600;}
.dp-kartu-nilai{font-size:26px; font-weight:700; line-height:1.25; margin-top:2px; overflow-wrap:anywhere;}
.dp-kartu-nilai.dp-na{font-size:16px; font-weight:600; color:var(--text-muted); padding:6px 0 4px;}
.dp-satuan{font-size:13px; font-weight:500; color:var(--text-muted);}
.dp-tanda{font-size:12px; font-weight:700; margin-top:2px;}
.dp-kartu.dp-bahaya .dp-tanda{color:var(--danger);}
.dp-kartu.dp-waspada .dp-tanda{color:var(--accent-strong);}
.dp-kartu.dp-baik .dp-tanda{color:var(--success);}
.dp-kartu-sub{font-size:12.5px; color:var(--text-muted); margin-top:2px;}

.dp-lencana{display:inline-block; font-size:12.5px; font-weight:700; white-space:nowrap;}
.dp-lencana.dp-bahaya{color:var(--danger);}
.dp-lencana.dp-waspada{color:var(--accent-strong);}
.dp-lencana.dp-baik{color:var(--success);}

.dp-segmen{display:flex; gap:2px; height:14px; margin-top:12px;}
.dp-segmen span{display:block; min-width:3px; flex-basis:0;}
.dp-segmen span:first-child{border-radius:4px 0 0 4px;}
.dp-segmen span:last-child{border-radius:0 4px 4px 0;}
.dp-segmen span:only-child{border-radius:4px;}
.seg-baik{background:var(--success);}
.seg-bahaya{background:var(--danger);}
.seg-waspada{background:var(--accent);}
.seg-info{background:var(--info);}
.seg-netral{background:var(--border-strong);}
.dp-legenda{display:flex; flex-wrap:wrap; gap:4px 14px; list-style:none; margin:8px 0 0; padding:0; font-size:13px; color:var(--text-muted);}
.dp-legenda li{display:flex; align-items:center; gap:6px;}
.dp-legenda strong{color:var(--text);}
.dp-kunci{display:inline-block; width:12px; height:12px; border-radius:3px; flex:none;}
.dp-kunci-aktual{background:var(--dp-aktual); height:3px; width:18px; border-radius:2px;}
.dp-kunci-rencana{height:0; width:18px; border-radius:0; border-top:3px dashed var(--dp-rencana);}

.dp-bar{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px;}
.dp-bar li{display:grid; grid-template-columns:minmax(90px, 1.2fr) minmax(60px, 2fr) auto; align-items:center; gap:10px; font-size:13.5px;}
.dp-bar-nama{overflow-wrap:anywhere;}
.dp-bar-jalur{display:block; background:var(--panel-alt); border-radius:4px; height:10px;}
.dp-bar-isi{display:block; height:10px; border-radius:4px; background:var(--dp-aktual);}
.dp-bar-nilai{font-weight:600; white-space:nowrap;}

.dp-grafik-kanvas{position:relative; margin-top:6px;}
.dp-grafik-kanvas svg{display:block; width:100%; height:auto; touch-action:pan-y;}
.dp-g-kisi{stroke:var(--border); stroke-width:1;}
.dp-g-teks{fill:var(--text-muted); font-size:12px;}
.dp-g-rencana{fill:none; stroke:var(--dp-rencana); stroke-width:2; stroke-dasharray:6 4;}
.dp-g-aktual{fill:none; stroke:var(--dp-aktual); stroke-width:2;}
.dp-g-sorot{stroke:var(--text-faint); stroke-width:1;}
.dp-tip{position:absolute; top:4px; left:0; background:var(--panel); border:1px solid var(--border-strong); border-radius:var(--radius); box-shadow:var(--shadow-sm); padding:6px 8px; font-size:12.5px; pointer-events:none; white-space:nowrap;}
.dp-tip[hidden]{display:none;}

.dp-definisi{margin-top:12px; font-size:13px; color:var(--text-muted);}
.dp-definisi summary{cursor:pointer; min-height:32px; display:list-item; font-weight:600; padding:6px 0;}
.dp-definisi p{margin:4px 0 0;}

.dp-tabel-wadah{overflow-x:auto;}
.dp-tabel{font-size:13.5px; min-width:0;}   /* style.css memberi semua table min-width 600px di layar <=768px */
.dp-tabel th{position:static; padding:8px; white-space:normal;}
.dp-tabel td{padding:8px; vertical-align:top; overflow-wrap:anywhere;}
.dp-buka{min-height:36px; padding:0 12px;}

.dp-akses-cari{display:flex; flex-direction:column; gap:4px; font-size:13px; font-weight:600; color:var(--text-muted); margin:6px 0 10px; max-width:360px;}
.dp-akses-cari input{min-height:var(--tap); box-sizing:border-box;}
.dp-akses-kendali{display:flex; flex-wrap:wrap; gap:6px; align-items:center;}
.dp-akses-kendali select, .dp-akses-kendali button{min-height:var(--tap);}
#dpAksesPanel{margin-bottom:14px;}
#dpAksesPanel tr[hidden]{display:none;}

/* HP & tablet tegak: tabel jadi kartu, tanpa geser mendatar. */
@media (max-width:900px){
  .dp-tabel, .dp-tabel tbody, .dp-tabel tr, .dp-tabel td{display:block; width:100%; box-sizing:border-box;}
  .dp-tabel thead{display:none;}   /* judul kolom pindah ke data-label tiap sel */
  .dp-tabel tr{border:1px solid var(--border); border-radius:var(--radius); margin-bottom:8px; padding:6px 10px; background:var(--panel);}
  .dp-tabel tr[hidden]{display:none;}
  .dp-tabel td{display:grid; grid-template-columns:minmax(92px, 38%) 1fr; gap:8px; border:0; padding:4px 0; text-align:left;}
  .dp-tabel td::before{content:attr(data-label); color:var(--text-muted); font-size:12.5px; font-weight:600;}
  .dp-tabel td:empty{display:none;}
  .dp-buka{min-height:var(--tap);}
}
@media (max-width:480px){
  .dp-grid{grid-template-columns:repeat(2, minmax(0, 1fr));}
  .dp-kartu-nilai{font-size:22px;}
  .dp-bar li{grid-template-columns:1fr auto; }
  .dp-bar-jalur{grid-column:1 / -1; grid-row:2;}
}

.dp-utuh{white-space:nowrap;}
.dp-lebih{display:none; width:100%; min-height:var(--tap); margin-top:4px;}
@media (max-width:900px){
  .dp-lebih{display:block;}
  .dp-tabel-wadah:not(.dp-semua) .dp-baris-lebih{display:none;}
}