/* Portal Customer — tampilan gelap. Semua aturan di bawah .pc-root supaya tidak mengganggu tampilan ERP. */
.pc-root{
  --bg:#0D1117; --panel:#151B23; --panel2:#11161D; --input:#0F141A; --garis:#232B37; --garis2:#2B3442;
  --teks:#E8ECF2; --teks2:#C9D1DC; --redup:#A3ADBB; --aksen:#2DD4BF; --aksen-gelap:#04211D;
  --biru:#5AB4FF; --biru-bg:#173049; --oranye:#FF9A4D; --oranye-bg:#3D2614; --ungu:#CDBBFF; --ungu-bg:#2A2342;
  --hijau-bg:#12302E; --hijau:#5EEAD4;
  background:var(--bg); color:var(--teks);
  font-family:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; font-size:14px; line-height:1.45;
  font-variant-numeric:tabular-nums; box-sizing:border-box;
}
.pc-root *,.pc-root *::before,.pc-root *::after{box-sizing:border-box}
.pc-root [hidden]{display:none!important}
.pc-root a{color:var(--hijau)} .pc-root a:hover{color:#99F6E4}
.pc-root button,.pc-root input,.pc-root select{font-family:inherit;font-size:14px}
.pc-root :focus-visible{outline:2px solid var(--aksen);outline-offset:2px}

/* kerangka halaman portal */
.pc-atas{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding:14px 20px;background:var(--panel2);border-bottom:1px solid var(--garis)}
.pc-merek{display:flex;align-items:center;gap:12px;font-size:19px;font-weight:800;letter-spacing:-.02em}
.pc-merek span.biru{color:var(--biru)}
.pc-merek .sub{font-size:12px;font-weight:600;color:var(--redup);letter-spacing:.05em;text-transform:uppercase;padding-left:12px;border-left:1px solid var(--garis2)}
.pc-akun{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pc-cust{display:flex;align-items:center;gap:8px;padding:6px 12px;border:1px solid var(--garis2);border-radius:999px;background:var(--panel)}
.pc-cust::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--aksen)}
.pc-tab-nav{display:flex;gap:4px;flex-wrap:wrap;padding:10px 20px 0;border-bottom:1px solid var(--garis);background:var(--bg)}
.pc-tab-nav a,.pc-tab-nav button{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border:0;background:none;color:var(--teks2);font-weight:600;text-decoration:none;border-bottom:2px solid transparent;cursor:pointer}
.pc-tab-nav .aktif{color:var(--hijau);border-bottom-color:var(--aksen)}
.pc-tab-nav .segera{color:#7D8899;cursor:default}
.pc-isi{max-width:1320px;margin:0 auto;padding:20px 20px 48px;display:flex;flex-direction:column;gap:14px}
.pc-judul{margin:0;font-size:24px;font-weight:800;letter-spacing:-.02em}
.pc-sub{margin:4px 0 0;color:var(--redup)}

/* panel & form */
.pc-panel{background:var(--panel);border:1px solid var(--garis);border-radius:14px;padding:14px}
.pc-filter{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}
.pc-filter label{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:600;color:var(--redup);flex:1 1 150px}
.pc-filter label.lebar{flex:3 1 260px}
.pc-input{min-height:42px;border-radius:9px;border:1px solid var(--garis2);background:var(--input);color:var(--teks);padding:0 12px;width:100%}
.pc-input::placeholder{color:#7D8899}
input[type=date].pc-input{color-scheme:dark}
.pc-btn{min-height:42px;padding:0 16px;border-radius:10px;border:0;background:var(--aksen);color:var(--aksen-gelap);font-weight:700;cursor:pointer;white-space:nowrap}
.pc-btn.garis{background:var(--input);color:var(--teks);border:1px solid var(--garis2);font-weight:600}
.pc-btn.kecil{min-height:36px;padding:0 12px;font-size:13px}
.pc-btn[disabled]{opacity:.5;cursor:default}

/* tombol filter kategori */
.pc-chips{display:flex;flex-wrap:wrap;gap:8px}
.pc-chip{min-height:40px;padding:0 14px;border-radius:999px;border:1px solid var(--garis2);background:var(--panel);color:var(--teks2);font-weight:700;cursor:pointer}
.pc-chip span{opacity:.75;font-weight:600;margin-left:4px}
.pc-chip.aktif{background:var(--teks);color:var(--bg);border-color:var(--teks)}
.pc-ringkas{color:var(--redup);font-size:13.5px;line-height:1.5;margin:12px 2px 14px}
.pc-ringkas b{color:var(--biru)}

/* tabel */
.pc-tabel-wrap{position:relative;overflow-x:auto;border:1px solid var(--garis);border-radius:14px;background:var(--panel)}
.pc-tabel{width:100%;min-width:860px;border-collapse:collapse;font-size:13.5px}
.pc-tabel th{background:var(--panel2);color:var(--redup);font-size:12px;font-weight:600;text-align:left;padding:11px 10px;white-space:nowrap}
.pc-tabel td{padding:11px 10px;border-top:1px solid #1F2630;vertical-align:top}
.pc-tabel tbody tr[data-id]{cursor:pointer}
.pc-tabel tbody tr[data-id]:hover,.pc-tabel tbody tr.pilih{background:#172333}
.pc-tabel .kanan,.pc-root .kanan{text-align:right}
.pc-tabel .tengah{text-align:center}
.pc-root .nowrap{white-space:nowrap}
.pc-root .tebal{font-weight:700}
.pc-mono{font-family:"JetBrains Mono",ui-monospace,Consolas,monospace;font-size:11.5px;color:var(--redup);margin-top:2px}
.pc-kecil{font-size:12.5px}
.pc-redup{color:var(--redup)}
.pc-link{background:none;border:0;padding:0;color:var(--hijau);font-weight:700;cursor:pointer;text-align:left}
.pc-link:hover{text-decoration:underline}
.pc-ikonbtn{width:40px;height:40px;border-radius:9px;border:1px solid #2A5552;background:var(--hijau-bg);color:var(--hijau);display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.pc-ikonbtn.pc-tutup{border-color:var(--garis2);background:var(--input);color:var(--teks2)}
.pc-pill{display:inline-block;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:700;background:#262D38;color:#C3CBD6;white-space:nowrap}
.pc-pill.besar{padding:7px 14px;font-size:13px;background:var(--biru-bg);color:#8CCBFF}
.pc-kat{display:inline-block;margin-top:3px;font-size:12px;font-weight:700}
.pc-k-on{color:var(--biru)} .pc-k-late{color:var(--oranye)} .pc-k-jalan{color:var(--ungu)} .pc-k-abu{color:var(--redup)}
.pc-baris-chip .pc-kat{padding:4px 10px;border-radius:999px;background:#1B222C;margin:0}
.pc-halaman{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;padding:10px 4px;color:var(--redup);font-size:13px}
.pc-halaman>div{display:flex;align-items:center;gap:8px}
.pc-hal{width:40px;height:38px;border-radius:8px;border:1px solid var(--garis2);background:var(--input);color:var(--teks);display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.pc-hal[disabled]{opacity:.4;cursor:default}
.pc-kosong{padding:28px 16px;text-align:center;color:var(--redup);background:var(--panel);border:1px dashed var(--garis2);border-radius:14px}
.pc-memuat{opacity:.55;pointer-events:none;transition:opacity .15s}

/* panel detail (laci kanan; layar penuh di HP) */
.pc-laci-latar{position:fixed;inset:0;background:rgba(3,6,10,.6);z-index:99990;display:none}
.pc-laci{position:fixed;top:0;right:0;bottom:0;width:min(480px,100%);background:var(--panel);border-left:1px solid #2E4A66;z-index:99991;overflow-y:auto;padding:18px;transform:translateX(100%);transition:transform .2s ease;display:flex;flex-direction:column;gap:14px}
.pc-laci.buka{transform:none}
.pc-laci-latar.buka{display:block}
.pc-det-kepala{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.pc-label{font-size:12px;font-weight:600;color:var(--redup)}
.pc-det-resi{margin:2px 0 0;font-size:20px;font-weight:800;word-break:break-all}
.pc-baris-chip{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.pc-dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px;margin:0;font-size:13px}
.pc-dl dt{color:var(--redup);font-size:12px}
.pc-dl dd{margin:2px 0 0;font-weight:600;word-break:break-word}
.pc-dl-lebar{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));padding:16px;border-radius:12px;background:var(--panel2)}
.pc-h3{margin:4px 0 0;font-size:14px;font-weight:700}
.pc-foto-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.pc-foto{display:block;aspect-ratio:3/4;border-radius:10px;overflow:hidden;background:#1F2731;border:1px solid var(--garis2)}
.pc-foto img{width:100%;height:100%;object-fit:cover;display:block}
/* foto POD tambahan dari ERP (per percobaan antar) */
.pc-foto-grup{display:flex;flex-direction:column;gap:8px;padding:10px 0 0;border-top:1px dashed var(--garis2)}
.pc-foto-judul{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 10px;font-size:12.5px}
.pc-foto-label{font-weight:700;color:var(--teks2)}
.pc-foto-label::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;background:var(--biru);vertical-align:1px}
.pc-foto-grup.au .pc-foto-label{color:var(--oranye)}
.pc-foto-grup.au .pc-foto-label::before{background:var(--oranye)}
.pc-foto-alasan{align-self:flex-start;padding:4px 10px;border-radius:8px;background:var(--oranye-bg);color:#FFD2AE;font-size:12.5px;font-weight:600}

/* riwayat */
.pc-riwayat{display:flex;flex-direction:column;gap:14px}
.pc-rw-tgl{font-weight:700;color:var(--teks2);font-size:13px;margin-bottom:6px}
.pc-rw-hari ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.pc-rw-hari li{display:flex;gap:10px;align-items:baseline;font-size:13.5px}
.pc-rw-jam{font-family:"JetBrains Mono",ui-monospace,Consolas,monospace;font-size:12px;color:var(--redup);flex:0 0 42px}
.pc-rw-titik{width:10px;height:10px;border-radius:50%;flex:none;background:#6B7788;transform:translateY(1px)}
.pc-rw-hari li.jalan .pc-rw-titik{background:#B49CFF}
.pc-rw-hari li.selesai .pc-rw-titik{background:var(--biru)}
.pc-rw-hari li.gagal .pc-rw-titik{background:var(--oranye)}
.pc-rw-hari li.terbaru .pc-rw-titik{box-shadow:0 0 0 4px var(--biru-bg)}

/* lacak publik */
.pc-lacak-form{display:flex;flex-wrap:wrap;gap:10px;padding:10px;border-radius:16px;background:var(--panel);border:1px solid var(--garis2)}
.pc-lacak-form textarea{flex:1 1 320px;min-height:52px;height:52px;resize:vertical;padding:14px 16px;border-radius:11px;border:1px solid var(--garis2);background:var(--input);color:var(--teks);font-family:"JetBrains Mono",ui-monospace,Consolas,monospace;font-size:14.5px}
.pc-lacak-form .pc-btn{min-height:52px;padding:0 28px;font-size:15px}
.pc-lacak-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
.pc-lacak-kartu{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:14px;border-radius:12px;background:var(--panel);border:1px solid var(--garis);color:var(--teks);text-align:left;cursor:pointer}
.pc-lacak-kartu.aktif{background:#172333;border-color:#3B6E99}
.pc-lacak-detail{display:flex;flex-direction:column;gap:18px;padding:22px;margin-top:14px}
.pc-tahap{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.pc-tahap li{display:flex;flex-direction:column;gap:8px;font-size:12.5px;font-weight:700;color:var(--redup)}
.pc-tahap li span{height:6px;border-radius:99px;background:#26303D}
.pc-tahap li.sudah{color:var(--teks)} .pc-tahap li.sudah span{background:var(--biru)}
.pc-ajak{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;padding:14px 16px;border-radius:12px;background:var(--hijau-bg);border:1px solid #2A5552;color:#CFF7F1}
.pc-ajak span{display:inline-flex;align-items:center;gap:8px}
.pc-ajak a{font-weight:700;text-decoration:none}

/* login */
.pc-login{min-height:100vh;display:flex;flex-wrap:wrap}
.pc-login-kiri{flex:1 1 420px;padding:48px 48px;background:var(--panel2);border-right:1px solid var(--garis);display:flex;flex-direction:column;justify-content:space-between;gap:32px}
.pc-login-kiri h1{margin:0;font-size:36px;line-height:1.15;font-weight:800;letter-spacing:-.03em}
.pc-login-kiri p{color:var(--redup);font-size:15px;max-width:440px}
.pc-login-kanan{flex:1 1 420px;padding:48px 24px;display:flex;align-items:center;justify-content:center}
.pc-login form{width:100%;max-width:380px;display:flex;flex-direction:column;gap:16px}
.pc-login label{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600;color:var(--teks2)}
.pc-login .pc-input{min-height:46px;font-size:15px}
.pc-login .pc-btn{min-height:48px;font-size:15px;font-weight:800}
.pc-pesan{padding:12px 14px;border-radius:10px;background:var(--oranye-bg);color:#FFC89E;font-size:13px}

/* picker customer (internal) */
.pc-picker{position:relative}
.pc-picker-kotak{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:6px;min-height:46px;border-radius:10px;border:1px solid var(--garis2);background:var(--input)}
.pc-picker-kotak input{flex:1 1 180px;min-height:34px;border:0;background:transparent;color:var(--teks);padding:0 6px}
.pc-picker-kotak input:focus{outline:none}
.pc-tag{display:inline-flex;align-items:center;gap:6px;padding:4px 4px 4px 10px;border-radius:999px;background:#1A2633;border:1px solid #2E4A66;font-weight:700;font-size:13px}
.pc-tag button{width:26px;height:26px;border-radius:50%;border:0;background:#26303D;color:var(--teks2);cursor:pointer}
.pc-picker-daftar{position:absolute;left:0;right:0;top:100%;margin-top:4px;max-height:300px;overflow-y:auto;background:var(--panel);border:1px solid var(--garis2);border-radius:10px;z-index:50;display:none}
.pc-picker-daftar.buka{display:block}
.pc-picker-daftar button{display:block;width:100%;text-align:left;padding:10px 12px;border:0;background:none;color:var(--teks);cursor:pointer;min-height:40px}
.pc-picker-daftar button:hover,.pc-picker-daftar button.sorot{background:#1A2633}
.pc-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

@media (max-width:640px){
  .pc-isi{padding:14px 14px 40px}
  .pc-atas{padding:12px 14px}
  .pc-tab-nav{padding:6px 10px 0}
  .pc-login-kiri{padding:28px 20px;flex-basis:100%}
  .pc-login-kiri h1{font-size:28px}
  .pc-login-kiri ul{display:none}
  .pc-tahap{gap:4px}
  .pc-tahap li{font-size:11px;word-break:break-word}
  .pc-dl{grid-template-columns:1fr 1fr}
  .pc-foto-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* HP: baris tabel kiriman jadi kartu */
@media (max-width:700px){
  .pc-tabel.pc-tabel-kartu{min-width:0}
  .pc-tabel-kartu thead{display:none}
  .pc-tabel-kartu tbody tr{display:grid;grid-template-columns:1fr 1fr;gap:6px 12px;padding:12px 14px;border-top:1px solid #1F2630}
  .pc-tabel-kartu tbody td{display:block;padding:0;border:0;text-align:left!important}
  .pc-tabel-kartu tbody td::before{content:attr(data-label);display:block;font-size:11px;font-weight:600;color:var(--redup);margin-bottom:1px}
  .pc-tabel-kartu tbody td.pc-sel-resi{grid-column:1 / -1}
  .pc-tabel-kartu tbody td.pc-sel-resi::before{display:none}
  .pc-tabel-kartu .pc-link{font-size:15px}
}

/* tabel akun: kolom aksi tidak melebar */
.pc-root select.pc-status-akun{width:auto;min-width:110px}
.pc-root input.pc-kode-tambah{min-width:220px}

/* penampil foto POD */
.pc-lihat{position:fixed;inset:0;z-index:99995;background:rgba(5,8,12,.94);display:none;flex-direction:column}
.pc-lihat.buka{display:flex}
.pc-lihat:focus{outline:none}
.pc-lihat-atas{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--garis)}
.pc-lihat-info{font-weight:700;color:var(--teks2)}
.pc-lihat-aksi{display:flex;gap:8px;flex-wrap:wrap}
.pc-lihat-aksi button,.pc-lihat-aksi a{display:inline-flex;align-items:center;gap:6px;min-height:44px;min-width:44px;justify-content:center;padding:0 12px;border-radius:10px;border:1px solid var(--garis2);background:var(--panel);color:var(--teks);font-weight:600;cursor:pointer;text-decoration:none}
.pc-lihat-aksi button:hover,.pc-lihat-aksi a:hover{border-color:var(--aksen);color:var(--hijau)}
.pc-lihat-panggung{position:relative;flex:1;min-height:0;display:flex;align-items:center;justify-content:center;overflow:hidden}
.pc-lihat-panggung img{display:block;transition:transform .2s ease;border-radius:6px;background:#1F2731}
.pc-lihat-geser{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;border:1px solid var(--garis2);background:rgba(21,27,35,.85);color:var(--teks);display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:1}
.pc-lihat-geser.kiri{left:12px}.pc-lihat-geser.kanan{right:12px}
.pc-foto img{transition:transform .2s ease}
@media (max-width:640px){.pc-lihat-aksi span{display:none}}
@media (prefers-reduced-motion:reduce){.pc-lihat-panggung img,.pc-foto img{transition:none}}

/* ===== Ringkasan KPI ===== */
.pc-root{--rk-o:#3B8EE0; --rk-l:#C2801F; --rk-s:#CC3355; --rk-b:#8E6FE8}   /* warna batang (lolos uji buta warna di latar #151B23) */
.pc-seg{display:inline-flex;padding:3px;gap:3px;border:1px solid var(--garis2);border-radius:10px;background:var(--input)}
.pc-seg button{min-height:34px;padding:0 12px;border:0;border-radius:7px;background:none;color:var(--teks2);font-weight:600;cursor:pointer}
.pc-seg button.aktif{background:var(--teks);color:var(--bg)}
.pc-filter-seg{display:flex;flex-direction:column;gap:6px}
.pc-saring-aktif{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;margin-bottom:12px;
  border:1px solid #2C4A66;background:#132233;border-radius:12px}
.pc-saring-aktif b{color:var(--teks)}

.pc-rk{display:flex;flex-direction:column;gap:14px}
.pc-rk-tiles{display:grid;grid-template-columns:1.3fr repeat(4,1fr);gap:10px}
.pc-rk-tile{display:flex;flex-direction:column;gap:4px;padding:14px;border:1px solid var(--garis);border-radius:14px;background:var(--panel);
  color:var(--teks);text-align:left;font:inherit;min-width:0}
button.pc-rk-tile{cursor:pointer} button.pc-rk-tile:hover{border-color:var(--garis2);background:#18202A}
.pc-rk-tile b{font-size:24px;font-weight:800;letter-spacing:-.02em;line-height:1.15}
.pc-rk-tile.utama{background:var(--biru-bg);border-color:#24476A}
.pc-rk-tile.utama b{font-size:34px;color:#fff}
.pc-rk-tile .pc-label{display:flex;align-items:center;gap:6px}
.pc-rk-catatan{line-height:1.55;margin:-4px 2px 0}

.pc-rk-sek{display:flex;flex-direction:column;gap:10px;padding:16px}
.pc-rk-kepala{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px}
.pc-rk-kepala .pc-h3{margin:0;font-size:15.5px}
.pc-rk-legend{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12.5px;color:var(--teks2)}
.pc-rk-legend span{display:inline-flex;align-items:center;gap:6px}
.pc-rk-titik{display:inline-block;width:10px;height:10px;border-radius:3px;flex:none}
i.pc-rk-o{background:var(--rk-o)} i.pc-rk-l{background:var(--rk-l)} i.pc-rk-s{background:var(--rk-s)} i.pc-rk-b{background:var(--rk-b)}

.pc-rk-list{display:flex;flex-direction:column}
.pc-rk-baris{display:grid;grid-template-columns:minmax(120px,190px) minmax(0,1fr) 64px 92px;grid-template-areas:"lbl bar pct n" "lbl rinci rinci rinci";
  column-gap:14px;row-gap:4px;align-items:center;width:100%;padding:10px 8px;border:0;border-top:1px solid #1F2630;background:none;
  color:var(--teks);font:inherit;text-align:left;cursor:pointer;border-radius:8px}
.pc-rk-list .pc-rk-baris:first-child{border-top:0}
.pc-rk-baris:hover{background:#172333}
.pc-rk-lbl{grid-area:lbl;display:flex;flex-direction:column;min-width:0}
.pc-rk-lbl b{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pc-rk-bar{grid-area:bar;display:flex;gap:2px;height:14px;min-width:0}
.pc-rk-bar i{display:block;min-width:3px;height:100%}
.pc-rk-bar i:first-child{border-radius:4px 0 0 4px} .pc-rk-bar i:last-child{border-radius:0 4px 4px 0} .pc-rk-bar i:only-child{border-radius:4px}
.pc-rk-pct{grid-area:pct;text-align:right;font-weight:800;font-size:15px}
.pc-rk-n{grid-area:n;text-align:right;white-space:nowrap}
.pc-rk-rinci{grid-area:rinci;display:flex;flex-wrap:wrap;gap:2px 12px}
.pc-rk-rinci span{display:inline-flex;align-items:center;gap:5px}
.pc-rk-rinci .pc-rk-titik{width:8px;height:8px;border-radius:2px}
.pc-rk-semua{align-self:flex-start}

.pc-rk-posisi{display:flex;flex-direction:column;gap:8px}
.pc-rk-pos{display:grid;grid-template-columns:minmax(130px,200px) minmax(0,1fr) minmax(90px,auto);gap:14px;align-items:center}
.pc-rk-pos-bar{display:block;height:14px;min-width:0}
.pc-rk-pos-bar > span{display:flex;gap:2px;height:100%;min-width:4px}
.pc-rk-pos-bar i{display:block;height:100%;min-width:3px}
.pc-rk-pos-bar i:first-child{border-radius:4px 0 0 4px} .pc-rk-pos-bar i:last-child{border-radius:0 4px 4px 0} .pc-rk-pos-bar i:only-child{border-radius:4px}
.pc-rk-pos-n{text-align:right;white-space:nowrap}

@media (max-width:900px){ .pc-rk-tiles{grid-template-columns:repeat(2,1fr)} .pc-rk-tile.utama{grid-column:1/-1} }
@media (max-width:640px){
  .pc-rk-baris{grid-template-columns:minmax(0,1fr) auto auto;grid-template-areas:"lbl pct n" "bar bar bar" "rinci rinci rinci";padding:12px 4px}
  .pc-rk-pos{grid-template-columns:minmax(0,1fr) auto;gap:6px 10px}
  .pc-rk-pos-bar{grid-column:1/-1;grid-row:2}
  .pc-rk-tile b{font-size:21px} .pc-rk-tile.utama b{font-size:30px}
}

/* ----- Ringkasan KPI v2: grafik ----- */
.pc-rk-kepala{align-items:flex-start}
.pc-rk-kepala > div:first-child{display:flex;flex-direction:column;gap:2px}
.pc-rk-alat{display:flex;flex-wrap:wrap;gap:8px}
.pc-rk-badge{display:inline-block;margin-left:6px;padding:0 7px;border-radius:999px;font-size:11px;font-weight:700;line-height:18px;
  color:#F3D38C;background:#2E2614;border:1px dashed #7A6128;vertical-align:1px}
i.pc-rk-jalan{background:repeating-linear-gradient(135deg,#5A6680 0 2px,transparent 2px 5px);box-shadow:inset 0 0 0 1px #5A6680}
.pc-rk-tile-meter{display:block;height:4px;border-radius:2px;background:#232B37;margin-top:6px;overflow:hidden}
.pc-rk-tile-meter i{display:block;height:100%;border-radius:2px}
/* kartu utama: angka + garis kecil sejajar, supaya tinggi kartu sama dengan kartu lain */
.pc-rk-utama-isi{display:flex;align-items:center;gap:14px;min-width:0}
.pc-rk-utama-isi b{flex:none}
.pc-spark{flex:1 1 auto;min-width:60px;max-width:200px;display:flex;flex-direction:column;align-items:flex-end;gap:3px;color:#9FC3E6;font-size:11px;font-weight:600}
.pc-spark svg{display:block;width:100%;height:30px;overflow:visible}
.pc-spark polyline{fill:none;stroke:#9DD3FF;stroke-width:2;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round}

/* tren: garis Ontime % (atas) + kolom jumlah kiriman (bawah), sumbu x sama */
.pc-gr{--ha:200px;--hb:130px;--tA:24px;--gap:44px;--pt:26px;--pb:10px;--kiri:52px;
  position:relative;height:calc(var(--tA) + var(--ha) + var(--gap) + var(--hb) + 28px);margin-top:6px}
.pc-gr-judul{position:absolute;left:var(--kiri);font-size:12px;font-weight:700;color:var(--teks2);letter-spacing:.02em}
.pc-gr-judul.a{top:0}
.pc-gr-judul.b{top:calc(var(--tA) + var(--ha) + var(--gap) - 24px)}
.pc-gr-sumbu{position:absolute;left:0;right:0}
.pc-gr-sumbu.a{top:var(--tA);height:var(--ha)}
.pc-gr-sumbu.b{top:calc(var(--tA) + var(--ha) + var(--gap));height:var(--hb)}
.pc-gr-sumbu i{position:absolute;left:var(--kiri);right:0;height:0;border-top:1px solid #222A35}
.pc-gr-sumbu.a i{bottom:calc(var(--pb) + var(--y) * (var(--ha) - var(--pt) - var(--pb)))}
.pc-gr-sumbu.b i{bottom:calc(var(--y) * var(--hb))}
.pc-gr-sumbu.b i[style="--y:0"]{border-top-color:#3A4555}
.pc-gr-sumbu b{position:absolute;right:calc(100% + 8px);top:0;transform:translateY(-50%);font-size:11.5px;font-weight:600;color:var(--redup);white-space:nowrap}
.pc-gr-plot{position:absolute;left:var(--kiri);right:0;top:0;bottom:0}
.pc-gr-garis{position:absolute;left:0;width:100%;top:calc(var(--tA) + var(--pt));height:calc(var(--ha) - var(--pt) - var(--pb));overflow:visible;pointer-events:none;z-index:1}
.pc-gr-garis polyline{fill:none;stroke:var(--rk-o);stroke-width:2.5;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round}
.pc-gr-garis polyline.putus{stroke-dasharray:5 5;opacity:.85}
.pc-gr-kols{position:absolute;left:0;right:0;top:var(--tA);bottom:0;display:flex}
.pc-gr-kol{position:relative;flex:1 1 0;min-width:0;display:flex;flex-direction:column;padding:0;border:0;border-radius:8px;background:none;color:inherit;font:inherit;cursor:pointer}
.pc-gr-kol:hover,.pc-gr-kol:focus-visible{background:rgba(90,180,255,.07)}
.pc-gr-a{position:relative;display:block;height:var(--ha);z-index:2}
.pc-gr-titik{position:absolute;left:50%;bottom:calc(var(--pb) + var(--y) * (var(--ha) - var(--pt) - var(--pb)));width:10px;height:10px;margin:0 0 -5px -5px;
  border-radius:50%;background:var(--rk-o);box-shadow:0 0 0 2px var(--panel)}
.pc-gr-kol:hover .pc-gr-titik{transform:scale(1.25)}
.pc-gr-kol.jalan .pc-gr-titik{background:var(--panel);box-shadow:inset 0 0 0 2px var(--rk-o),0 0 0 2px var(--panel)}
.pc-gr-titik b{position:absolute;left:50%;bottom:13px;transform:translateX(-50%);font-size:12px;font-weight:800;color:var(--teks);white-space:nowrap}
.pc-gr-kol.jalan .pc-gr-titik b{color:var(--redup)}
.pc-gr-b{position:relative;display:flex;align-items:flex-end;justify-content:center;height:var(--hb);margin-top:var(--gap)}
.pc-gr-kol.jalan .pc-gr-b::before,.pc-gr-kol.depan .pc-gr-b::before{content:"";position:absolute;inset:0 6%;border-radius:6px;
  background:repeating-linear-gradient(135deg,rgba(150,165,190,.10) 0 2px,transparent 2px 6px)}
.pc-gr-tumpuk{position:relative;display:flex;flex-direction:column-reverse;gap:2px;width:min(64%,38px);min-height:2px}
.pc-gr-tumpuk i{display:block;min-height:2px}
.pc-gr-tumpuk i:last-child{border-radius:4px 4px 0 0}
.pc-gr-x{display:flex;align-items:center;justify-content:center;height:28px;font-size:11.5px;font-weight:600;color:var(--redup);white-space:nowrap}
.pc-gr-x.kosong{visibility:hidden}
.pc-gr-kol.jalan .pc-gr-x{color:#F3D38C}

/* keterangan melayang */
.pc-tip{position:fixed;z-index:70;max-width:300px;padding:10px 12px;border-radius:10px;background:#0A0E13;border:1px solid var(--garis2);
  color:var(--teks2);font-size:12.5px;line-height:1.55;white-space:pre-line;pointer-events:none;box-shadow:0 10px 30px rgba(0,0,0,.45)}
.pc-tip::first-line{font-weight:800;color:var(--teks)}

/* per kota: batang Ontime % (skala 0–100) / jumlah kiriman (bertumpuk) */
.pc-kt-sumbu,.pc-kt-baris{display:grid;grid-template-columns:minmax(110px,200px) minmax(0,1fr) 64px 96px;column-gap:14px;align-items:center}
.pc-kt-sumbu{padding:0 8px;margin-top:2px}
.pc-kt-skala{position:relative;height:16px}
.pc-kt-skala i{position:absolute;top:0;transform:translateX(-50%);font-style:normal;font-size:11.5px;font-weight:600;color:var(--redup);white-space:nowrap}
.pc-kt-skala i:first-child{transform:none} .pc-kt-skala i:last-child{transform:translateX(-100%)}
.pc-kt-list .pc-kt-baris{width:100%;padding:9px 8px;border:0;border-top:1px solid #1F2630;border-radius:8px;background:none;color:var(--teks);font:inherit;text-align:left;cursor:pointer}
.pc-kt-list .pc-kt-baris:first-child{border-top:0}
.pc-kt-baris:hover,.pc-kt-baris:focus-visible{background:#172333}
.pc-kt-nm{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pc-kt-trek{position:relative;display:block;height:14px}
.pc-kt-trek .m-pct{position:absolute;inset:0;border-radius:4px;background:
  linear-gradient(90deg,transparent calc(25% - 1px),#2B3442 calc(25% - 1px),#2B3442 25%,transparent 25%,transparent calc(50% - 1px),#2B3442 calc(50% - 1px),#2B3442 50%,transparent 50%,transparent calc(75% - 1px),#2B3442 calc(75% - 1px),#2B3442 75%,transparent 75%),#1A212B}
.pc-kt-trek .m-pct i{display:block;height:100%;border-radius:4px;background:var(--rk-o)}
.pc-kt-trek .m-jml{display:flex;gap:2px;height:100%;min-width:3px}
.pc-kt-trek .m-jml i{display:block;height:100%;min-width:2px}
.pc-kt-trek .m-jml i:first-child{border-radius:4px 0 0 4px} .pc-kt-trek .m-jml i:last-child{border-radius:0 4px 4px 0} .pc-kt-trek .m-jml i:only-child{border-radius:4px}
.pc-kt-pct{text-align:right;font-weight:800;font-size:15px}
.pc-kt-n{text-align:right;white-space:nowrap}
[data-kt-mode=pct] .m-jml,[data-kt-mode=jml] .m-pct,[data-kt-mode=pct] .pc-kt-legend-jml{display:none}
.pc-rk-pos[data-tip]{cursor:default}

@media (max-width:640px){
  .pc-gr{--ha:160px;--hb:104px;--kiri:40px;--gap:40px}
  .pc-gr-x.hp-kosong{visibility:hidden}
  .pc-gr-titik b{font-size:11px}
  .pc-kt-baris{grid-template-columns:minmax(0,1fr) auto auto;grid-template-areas:"nm pct n" "trek trek trek";row-gap:6px}
  .pc-kt-nm{grid-area:nm} .pc-kt-trek{grid-area:trek} .pc-kt-pct{grid-area:pct} .pc-kt-n{grid-area:n}
  .pc-kt-sumbu{grid-template-columns:1fr} .pc-kt-sumbu > span:not(.pc-kt-skala){display:none}
}
/* ujung kiri/kanan: hanya saat kolom sempit (banyak periode), label digeser masuk supaya tidak keluar dari kotak grafik.
   Kolom lebar tetap di tengah kolom, sejajar dengan batangnya. */
.pc-gr.padat .pc-gr-kol:first-child .pc-gr-x{justify-content:flex-start}
.pc-gr.padat .pc-gr-kol:last-child .pc-gr-x{justify-content:flex-end}
.pc-gr.padat .pc-gr-kol:first-child .pc-gr-titik b{left:0;transform:none}
.pc-gr.padat .pc-gr-kol:last-child .pc-gr-titik b{left:auto;right:0;transform:none}
@media (max-width:640px){
  .pc-gr.padat-hp .pc-gr-kol:first-child .pc-gr-x{justify-content:flex-start}
  .pc-gr.padat-hp .pc-gr-kol:last-child .pc-gr-x{justify-content:flex-end}
  .pc-gr.padat-hp .pc-gr-kol:first-child .pc-gr-titik b{left:0;transform:none}
  .pc-gr.padat-hp .pc-gr-kol:last-child .pc-gr-titik b{left:auto;right:0;transform:none}
}
.pc-gr.padat .pc-gr-titik{width:7px;height:7px;margin:0 0 -3.5px -3.5px}
@media (max-width:640px){
  .pc-gr.padat-hp .pc-gr-titik{width:6px;height:6px;margin:0 0 -3px -3px;box-shadow:none}
  .pc-gr.padat .pc-gr-titik{width:0;height:0;margin:0}
  .pc-gr.padat .pc-gr-kol.jalan .pc-gr-titik{width:7px;height:7px;margin:0 0 -3.5px -3.5px}
  .pc-gr.padat-hp .pc-gr-kol.jalan .pc-gr-titik{width:8px;height:8px;margin:0 0 -4px -4px;box-shadow:inset 0 0 0 2px var(--c,var(--rk-o))}
  .pc-gr.padat .pc-gr-garis polyline{stroke-width:2}
}

/* angka jumlah di atas kolom; angka "ops" disembunyikan kalau kolom sempit */
.pc-gr-total{position:absolute;left:50%;bottom:calc(100% + 4px);transform:translateX(-50%);font-size:11.5px;font-weight:700;color:var(--teks2);white-space:nowrap}
.pc-gr-kol.jalan .pc-gr-total,.pc-gr-kol.depan .pc-gr-total{color:var(--redup)}
.pc-gr-titik b.ops{font-weight:700;color:var(--teks2)}
.pc-gr.padat .ops{display:none}
@media (max-width:640px){ .pc-gr.padat-hp .ops{display:none} }

/* ===== Si Alo (maskot) ===== */
.pc-alo{display:block;height:auto;max-width:100%;flex:none;user-select:none;-webkit-user-drag:none}
/* login */
.pc-login-tengah{display:flex;flex-direction:column;gap:26px}
.pc-login-alo{margin:0;display:flex;align-items:flex-end;gap:16px}
.pc-login-alo img{width:clamp(150px,22vw,250px);height:auto;filter:drop-shadow(0 18px 30px rgba(0,0,0,.35));animation:pc-alo-melayang 4.5s ease-in-out infinite}
.pc-login-alo figcaption{position:relative;max-width:240px;margin-bottom:40px;padding:12px 14px;border-radius:14px;background:var(--panel);border:1px solid var(--garis2);
  color:var(--teks2);font-size:13.5px;line-height:1.5}
.pc-login-alo figcaption b{display:block;color:var(--teks);margin-bottom:2px}
.pc-login-alo figcaption::before{content:"";position:absolute;left:-7px;bottom:18px;width:12px;height:12px;background:var(--panel);border-left:1px solid var(--garis2);border-bottom:1px solid var(--garis2);transform:rotate(45deg)}
@keyframes pc-alo-melayang{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
/* lacak */
.pc-lacak-kepala{display:flex;align-items:center;justify-content:center;gap:18px;text-align:left}
.pc-lacak-kepala .pc-alo{width:110px}
/* kotak kosong */
.pc-kosong-alo{display:flex;align-items:center;justify-content:center;gap:16px;text-align:left}
.pc-kosong-alo .pc-alo{width:auto;height:96px}
.pc-kosong-alo > div{display:flex;flex-direction:column;gap:3px}
.pc-kosong-alo b{color:var(--teks);font-size:15px}
/* sapaan di Ringkasan KPI */
.pc-alo-sapa{display:flex;align-items:flex-end;gap:12px}
.pc-alo-sapa .pc-alo{width:auto;height:92px}
.pc-alo-gelembung{position:relative;flex:1 1 auto;min-width:0;margin-bottom:10px;padding:12px 16px;border-radius:16px;background:var(--panel);border:1px solid var(--garis2)}
.pc-alo-gelembung::before{content:"";position:absolute;left:-7px;bottom:16px;width:12px;height:12px;background:var(--panel);border-left:1px solid var(--garis2);border-bottom:1px solid var(--garis2);transform:rotate(45deg)}
.pc-alo-gelembung p{margin:0;color:var(--teks2);line-height:1.55}
.pc-alo-gelembung p b{color:var(--teks)}
.pc-alo-nama{display:block;font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--hijau);margin-bottom:2px}
.pc-alo-baris{display:flex;align-items:center;gap:12px;color:var(--teks2)}
.pc-alo-baris .pc-alo{width:auto;height:72px}
@media (max-width:640px){
  .pc-login-tengah{gap:14px}
  .pc-login-alo img{width:92px}
  .pc-login-alo figcaption{margin-bottom:14px;font-size:12.5px;padding:9px 12px}
  .pc-lacak-kepala{flex-direction:column;text-align:center;gap:8px}
  .pc-lacak-kepala .pc-alo{width:84px}
  .pc-kosong-alo{flex-direction:column;text-align:center}
  .pc-kosong-alo .pc-alo{height:80px}
  .pc-alo-sapa .pc-alo{height:70px}
}
@media (prefers-reduced-motion:reduce){.pc-login-alo img{animation:none}}

/* tombol per customer di Daftar Kiriman (muncul kalau lebih dari 1 kode) */
.pc-chips-cust{align-items:center;margin-bottom:10px}
.pc-chips-cust .pc-label{margin-right:4px}
.pc-chips-cust .pc-chip{font-family:"JetBrains Mono",ui-monospace,Consolas,monospace;font-size:13px}
.pc-chips-cust .pc-chip.aktif{background:var(--aksen);color:var(--aksen-gelap);border-color:var(--aksen)}
.pc-chips-cust .pc-chip.nol{opacity:.55}
[data-kel=cust] .pc-kt-sumbu,[data-kel=cust] .pc-kt-baris{grid-template-columns:minmax(140px,300px) minmax(0,1fr) 64px 96px}
@media (max-width:640px){ [data-kel=cust] .pc-kt-baris{grid-template-columns:minmax(0,1fr) auto auto} [data-kel=cust] .pc-kt-sumbu{grid-template-columns:1fr} }

/* tren per customer: warna titik/garis per customer (--c) */
.pc-gr-cust .pc-gr-titik{background:var(--c)}
.pc-gr-cust .pc-gr-kol.jalan .pc-gr-titik{background:var(--panel);box-shadow:inset 0 0 0 2px var(--c),0 0 0 2px var(--panel)}
.pc-gr-cust .pc-gr-titik b.bawah{bottom:auto;top:13px}
.pc-gr-cust .pc-gr-titik{width:9px;height:9px;margin:0 0 -4.5px -4.5px}
.pc-gr-leg-cust{margin-top:4px}
.pc-gr-leg-cust b{color:var(--teks)}
.pc-rk-tabel-cust{min-width:0}
.pc-rk-tabel-cust .pc-rk-titik{vertical-align:-1px}
.pc-tabel th.kanan,.pc-tabel td.kanan{text-align:right}
[data-trenkel=cust] > .pc-leg-gab{display:none}
.pc-gr-cust .pc-gr-titik b.ops{color:var(--teks);font-weight:800}

/* ===== Email laporan mingguan (admin) ===== */
.pc-em{display:flex;flex-direction:column;gap:14px}
.pc-em-atas{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px}
.pc-em-status{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid #24476A;background:#132233;border-radius:10px;font-size:13px;color:#BFD9F2}
.pc-em-status i{width:8px;height:8px;border-radius:50%;background:var(--oranye)} .pc-em-status i.ok{background:var(--aksen)}
.pc-em-tombol{display:flex;flex-wrap:wrap;gap:8px;margin-left:auto}
.pc-em-grid{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(300px,1fr);gap:14px;align-items:start}
.pc-em-tabel{min-width:640px}
.pc-em-mati td{opacity:.6}
.pc-em-pill{display:inline-block;padding:2px 8px;border-radius:999px;font-size:12px;font-weight:700;background:#232B37;color:var(--teks2)}
.pc-em-pill.hijau{background:var(--hijau-bg);color:var(--hijau)} .pc-em-pill.oranye{background:var(--oranye-bg);color:#FFC89E}
a.pc-em-link{display:inline-flex;align-items:center;text-decoration:none;color:var(--teks)}
.pc-em-form{display:flex;flex-direction:column;gap:12px}
.pc-em-form label{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:600;color:var(--teks2);position:relative}
.pc-em-form-kepala{display:flex;justify-content:space-between;align-items:center;gap:8px}
.pc-em-form-kepala .pc-h3{margin:0;font-size:15.5px}
.pc-em-baris2{display:flex;flex-wrap:wrap;gap:16px}
.pc-em-form label.pc-em-cek{flex-direction:row;align-items:center;gap:8px;font-size:13.5px;color:var(--teks)}
.pc-em-cek input{width:18px;height:18px;accent-color:var(--aksen)}
.pc-em-saran{position:absolute;left:0;right:0;top:100%;z-index:5;margin-top:4px;display:flex;flex-direction:column;background:var(--panel2);border:1px solid var(--garis2);border-radius:10px;overflow:hidden;box-shadow:0 10px 24px rgba(0,0,0,.4)}
.pc-em-saran button{min-height:40px;padding:8px 12px;border:0;border-top:1px solid #1F2630;background:none;color:var(--teks);text-align:left;font:inherit;font-size:13px;cursor:pointer}
.pc-em-saran button:first-child{border-top:0} .pc-em-saran button:hover{background:#172333}
.pc-em-uji{display:flex;flex-direction:column;gap:8px;padding-top:12px;border-top:1px dashed var(--garis2)}
.pc-pesan.ok{background:var(--hijau-bg);color:#B7F5EA}
@media (max-width:900px){ .pc-em-grid{grid-template-columns:minmax(0,1fr)} .pc-em-tombol{margin-left:0} }

/* ===== Report Unit Kerja (menu ERP) ===== */
.ru-pilihan{display:flex;flex-wrap:wrap;gap:14px 20px;align-items:flex-end}
.ru-pil{display:flex;flex-direction:column;gap:6px;min-width:0}
.ru-pil.lebar{flex:1 1 260px}
.ru-pil .pc-chips{gap:6px}
.ru-pil select.pc-input{max-width:420px}
.ru-combo{position:relative;max-width:460px;width:100%}
.ru-combo .pc-input{padding-right:40px;text-overflow:ellipsis}
.ru-combo .pc-input::placeholder{color:var(--redup)}
.ru-combo-x{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:34px;height:34px;border:0;border-radius:8px;background:transparent;color:var(--redup);font-size:20px;line-height:1;cursor:pointer}
.ru-combo-x:hover,.ru-combo-x:focus-visible{background:var(--garis);color:var(--teks)}
.ru-combo-daftar{position:absolute;left:0;right:0;top:100%;z-index:30;margin-top:4px;max-height:min(360px,55vh);overflow-y:auto;overscroll-behavior:contain;background:var(--panel2);border:1px solid var(--garis2);border-radius:10px;padding:4px;box-shadow:0 12px 28px rgba(0,0,0,.5)}
.ru-combo-grup{padding:8px 10px 4px;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--redup)}
.ru-combo-op{padding:8px 10px;border-radius:7px;cursor:pointer;color:var(--teks2);font-size:14px;line-height:1.35}
.ru-combo-op b{color:var(--teks);font-weight:700;font-family:"JetBrains Mono",ui-monospace,Consolas,monospace;font-size:13px}
.ru-combo-grup+.ru-combo-op,.ru-combo-grup~.ru-combo-op{padding-left:16px}
.ru-combo-op:hover{background:var(--garis)}
.ru-combo-op.sorot{background:var(--biru-bg);color:var(--teks)}
.ru-combo-op[aria-selected=true]{box-shadow:inset 3px 0 0 var(--aksen)}
.ru-combo-kosong{padding:10px;color:var(--redup);font-size:13px}
.ru-hari-ini{display:flex;flex-direction:column;gap:14px}
.ru-judul-baris{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:10px}
.ru-kartu-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px}
.ru-kartu b{font-size:30px}
.ru-kartu.bahaya{background:#1E1218;border-color:#5A2232}
.ru-kartu.bahaya:hover{background:#26141C}
i.ru-titik-ungu{background:var(--hijau)} i.ru-titik-abu{background:#7D8899}
.ru-bagian{display:flex;flex-direction:column;gap:10px;padding:16px;scroll-margin-top:80px}
.ru-bagian-kepala{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:10px}
.ru-bagian-kepala .pc-h3{margin:0;font-size:16px;display:flex;align-items:center;gap:8px}
.ru-n{padding:1px 9px;border-radius:999px;background:var(--panel2);border:1px solid var(--garis2);font-size:13px}
.ru-aksi{display:flex;flex-wrap:wrap;gap:8px}
.ru-kosong{padding:6px 2px}
.ru-lebih{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:2px}
.ru-foto .ru-lebih{display:none}
.ru-foto-judul{padding:2px 2px 8px;margin-bottom:4px;border-bottom:1px solid var(--garis2);font-size:12.5px;font-weight:700;color:var(--teks2)}
.ru-form .pc-seg button,.ru-pil .pc-seg button{white-space:nowrap}
@media (max-width:640px){
  .ru-kartu-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-flow:row dense}
  .ru-kartu b{font-size:24px}
  .ru-kartu.bahaya{grid-column:1/-1}
  .ru-pil .pc-seg{display:flex} .ru-pil .pc-seg button{flex:1 1 0;padding:4px 8px;font-size:13px;white-space:normal;min-height:40px}
}
.ru-tabel{min-width:900px}
.ru-hari{display:inline-block;min-width:58px;padding:3px 8px;border-radius:8px;background:var(--panel2);color:var(--teks2);font-weight:800;text-align:center;white-space:nowrap}
.ru-hari.merah{background:#4A1A26;color:#FFB3C1} .ru-hari.kuning{background:var(--oranye-bg);color:#FFC97A}
.ru-foto .ru-aksi,.ru-foto .pc-rk-alat,.ru-foto [data-ru-gambar]{visibility:hidden}
/* angka utama + meter target */
.ru-utama{grid-column:span 1}
.ru-utama-isi{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px}
.ru-gap{padding:2px 9px;border-radius:999px;font-size:12.5px;font-weight:800}
.ru-gap.turun{background:#4A1A26;color:#FFB3C1} .ru-gap.naik{background:#173049;color:#9CC9F5}
.ru-meter{position:relative;display:block;height:10px;border-radius:999px;background:#0F1B2A;margin:4px 0 2px}
.ru-meter i{position:absolute;left:0;top:0;bottom:0;border-radius:999px;background:var(--rk-o)}
.ru-meter em{position:absolute;top:-4px;bottom:-4px;width:2px;margin-left:-1px;background:#E8ECF2}
.ru-meter.kecil{height:8px;flex:1 1 auto;margin:0;background:#232B37}
.ru-meter.kecil em{top:-3px;bottom:-3px}
.ru-meter.biru i{background:var(--rk-o)} .ru-meter.kuning i{background:var(--rk-l)} .ru-meter.merah i{background:var(--rk-s)} .ru-meter.abu i{background:#7D8899}
/* per unit kerja */
.ru-unk{display:flex;flex-direction:column;background:var(--panel)}
.ru-unk-kepala,.ru-unk-baris{display:grid;grid-template-columns:minmax(150px,1.3fr) minmax(160px,2fr) 64px 72px 80px 86px;gap:10px;align-items:center}
.ru-unk-kepala{padding:0 10px 6px}
.ru-unk-kepala span:nth-child(n+3){text-align:right}
.ru-unk-wil{padding:9px 10px;margin-top:6px;border-radius:9px;background:var(--panel2);font-size:12.5px;letter-spacing:.04em}
.ru-unk-baris{min-height:44px;padding:6px 10px;border:0;border-top:1px solid #1F2630;background:none;color:var(--teks);font:inherit;text-align:left;cursor:pointer}
.ru-unk-baris:hover{background:#172333}
.ru-unk-nm{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ru-unk-bar{display:flex;align-items:center;gap:10px}
.ru-unk-bar b{min-width:48px;text-align:right}
.ru-unk-gap,.ru-unk-n{text-align:right;font-weight:700}
.ru-unk-gap.turun{color:#FFB3C1} .ru-unk-gap.naik{color:#9CC9F5} .ru-unk-n.merah{color:#FFB3C1}
@media (max-width:760px){
  .ru-unk-kepala{display:none}
  .ru-unk-baris{grid-template-columns:minmax(0,1fr) auto;row-gap:4px}
  .ru-unk-bar{grid-column:1/-1;grid-row:2}
  .ru-unk-n,.ru-unk-gap{font-size:12.5px}
  .ru-unk-baris > span:nth-child(n+4){display:none}
}
/* pengaturan */
.ru-atur{display:flex;flex-direction:column;gap:14px}
.ru-atur .pc-panel{display:flex;flex-direction:column;gap:12px;padding:16px}
.ru-form{display:flex;flex-direction:column;gap:12px;padding:14px;border:1px solid var(--aksen);border-radius:12px;background:var(--panel2)}
.ru-form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px 16px;align-items:start}
.ru-form-grid label{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:600;color:var(--redup)}
.ru-form-grid .lebar{grid-column:1/-1}
.ru-wil-pilih{margin:0;padding:0;border:0;display:flex;flex-direction:column;gap:2px}
.ru-form-grid label.ru-cek,.ru-cek{flex-direction:row;align-items:center;gap:10px;min-height:36px;font-size:14px;font-weight:600;color:var(--teks)}
.ru-cek input{width:18px;height:18px;accent-color:var(--aksen)}
.ru-form-aksi{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.ru-target{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px}
.ru-target label{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:600;color:var(--redup)}
.ru-target .pc-input{width:180px}
.ru-target-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:8px}
.ru-target-item{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px;border:1px solid var(--garis2);border-radius:10px;background:var(--panel2)}
.ru-target-item > span{flex:1 1 auto;min-width:0}

/* Report Cabang — tabel Daftar Kiriman ringkas (7 kolom, muat tanpa geser) */
@media (min-width:701px){.pc-tabel.pc-tabel-ru{min-width:760px}}
@media (min-width:701px){.pc-tabel-ru td.ru-tujuan{min-width:180px}}
.pc-tabel-ru .ru-alasan{max-width:220px;margin-top:3px}
.pc-tabel-ru .ru-do{max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pc-tabel-ru .pc-pill+div,.pc-tabel-ru .pc-pill~.pc-mono{margin-top:4px}
@media (max-width:700px){
  .pc-tabel.pc-tabel-ru,.pc-tabel-ru tbody{display:block;width:100%}
  .pc-tabel-ru tbody tr{grid-template-columns:minmax(0,1fr) minmax(0,1fr);box-sizing:border-box}
  .pc-tabel-ru tbody td.pc-sel-resi{order:-1}
  .pc-tabel-ru .pc-pill,.pc-tabel-ru .nowrap{white-space:normal}
}
/* Report Cabang di ERP: isi mengikuti lebar layar (sidebar ERP bisa diciutkan) dan rata kiri sejajar label tab */
.ru-lebar .pc-isi{max-width:1760px;margin:0;padding:20px 34px 48px}
@media (max-width:700px){ .ru-lebar .pc-isi{padding:14px 14px 40px} }
@media (min-width:701px){
  .ru-lebar .pc-filter label{flex:0 1 200px}
  .ru-lebar .pc-filter label.lebar{flex:0 1 520px}
}