/* GHL4b (9 Nov 2026): Pengaturan Gaji garis waktu — gaya contoh KOMPAS 2026-11-09-hl-pengaturan-gaji-garis-waktu
   (revisi 3) dengan awalan .hp-, warna hanya token Portal --ui-* (Inter, doff). Garis waktu boleh gulir samping di
   dalam kartunya; halaman tidak (HP 390 px). Tombol/isian memakai komponen Portal, di sini hanya ukuran. */
.hp-card .hl-head{flex-wrap:wrap}
.hp-status{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px}
.hp{display:flex;flex-direction:column;gap:12px;min-width:0;font-variant-numeric:tabular-nums}
.hp [hidden]{display:none!important}
.hp-muat{color:var(--ui-muted-text)}
/* HL7b: panel isi tab (Aturan Hari Kerja, Absen simulasi, Aturan lain) berjarak 16 px seperti kartu Portal lain */
#hp-o{display:flex;flex-direction:column;gap:16px;min-width:0}
.hp-mono{font-variant-numeric:tabular-nums}
.hp-ya{color:var(--ui-ok)}.hp-tidak{color:var(--ui-muted-text);font-weight:500}
.hp-pill{display:inline-flex;align-items:center;min-height:24px;padding:0 9px;border-radius:99px;font-size:12px;font-weight:600;white-space:nowrap;border:1px solid transparent}
.hp-p-ok{background:var(--ui-ok-bg);color:var(--ui-ok);border-color:var(--ui-ok-line)}.hp-p-warn{background:var(--ui-warn-bg);color:var(--ui-warn);border-color:var(--ui-warn-line)}
.hp-p-info{background:var(--ui-info-bg);color:var(--ui-info);border-color:var(--ui-info-line)}.hp-p-mute{background:var(--ui-hover);color:var(--ui-muted-text);border-color:var(--ui-line)}
.hp-p-bad{background:var(--ui-danger-bg);color:var(--ui-danger);border-color:var(--ui-danger-line)}
.hp-chev{font-size:10px;color:var(--ui-muted-text)}
.hp-err{margin:0;color:var(--ui-danger);font-size:12px}
.hp-err:empty{display:none}
.hp-unit{color:var(--ui-muted-text);font-size:12px}
.hp-meta{font-size:12px;color:var(--ui-muted-text)}
.hp-note{margin:0;font-size:12px;color:var(--ui-muted-text);line-height:1.45}
.hp-panel{background:var(--ui-panel);border:1px solid var(--ui-line);border-radius:var(--ui-radius);padding:14px 16px;min-width:0}
.hp-khead{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;justify-content:space-between}
/* HL7b: satu skala judul panel 15 px/600 (h2, tombol Absen simulasi, summary Aturan lain); .hp-sub mengalahkan .ui-shell h3 16 px */
.hp h2{margin:0;font-size:15px;font-weight:600}
.hp .hp-sub{margin:0;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--ui-muted-text);font-weight:600}
.hp-acts{display:flex;gap:8px;align-items:center;justify-content:flex-end;flex-wrap:wrap}
.ui-shell .hp button{min-height:34px;margin:0;padding:0 12px;font-size:13px;white-space:nowrap}
.ui-shell .hp :is(input:not([type=checkbox]):not([type=radio]),select){min-height:0;margin:0}
.hp :is(input[type=time],input[type=number],input[type=date],select,.pss>.pss-input){height:36px;padding:0 8px;border:1px solid var(--ui-input-line);border-radius:6px;background:var(--ui-panel);font-size:13px;color:var(--ui-text)}
.hp input[type=time]{width:128px;max-width:100%}
.hp input[type=number]{width:88px;text-align:right}
.hp input:disabled{background:var(--ui-hover);color:var(--ui-muted-text);cursor:not-allowed}
.hp label{margin:0;font-weight:500}
.hp input[type=checkbox]:not(.hp-sw){width:16px;height:16px;margin:0;accent-color:var(--ui-primary)}
/* Saklar on/off */
.hp input.hp-sw{appearance:none;-webkit-appearance:none;position:relative;width:36px;height:20px;min-height:0;padding:0;margin:0;border:0;border-radius:10px;background:var(--ui-button-line);cursor:pointer;flex:none;transition:background .15s}
.hp input.hp-sw::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--ui-panel);box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .15s}
.hp input.hp-sw:checked{background:var(--ui-ok)}
.hp input.hp-sw:checked::after{transform:translateX(16px)}
.hp input.hp-sw:disabled{opacity:.4;cursor:not-allowed}
.hp input.hp-sw:focus-visible{outline:2px solid var(--ui-info);outline-offset:2px}
/* Isian: label · kendali (nilai + saklar) · keterangan */
.hp-fgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:4px 12px}
.hp-fld{display:grid;grid-template-rows:auto 36px auto;row-gap:4px;align-content:start;min-width:0;padding:8px 10px;border-radius:8px;border:1px solid transparent}
.hp-fld>label{display:block;font-size:12px;line-height:18px}
.hp-in{display:flex;align-items:center;gap:8px;height:36px}
.hp-in .hp-sw{margin-left:4px}
.hp-fld small{display:block;color:var(--ui-muted-text);font-size:12px;line-height:1.35}
.hp-fld.hp-chg{background:var(--ui-warn-bg);border-color:var(--ui-warn-line)}
.hp-fld small.hp-lama{color:var(--ui-warn);font-weight:600}
.hp-fld.hp-mati>label{color:var(--ui-muted-text)}
.hp-tgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:4px 12px;margin-top:6px;padding-top:8px;border-top:1px solid var(--ui-line)}
.hp-tgrid-saja{margin:0;padding:0;border:0}
.hp-fld.hp-tg{display:block;padding:0}
.hp-tgl{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;padding:6px 10px;cursor:pointer;border-radius:8px}
.hp-tt{display:flex;flex-direction:column;gap:2px;min-width:0}
.hp-nm{font-size:12px;font-weight:500}
.hp-fld.hp-tg.hp-mati .hp-nm{color:var(--ui-muted-text)}
.hp-fld.hp-tg.hp-mati .hp-tgl{cursor:not-allowed}
.hp-gsw{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:600;color:var(--ui-muted-text);cursor:pointer;min-height:30px;padding:0 4px;border-radius:6px}
.hp-gsw.hp-chg{background:var(--ui-warn-bg);color:var(--ui-warn);padding:0 8px}
/* Daftar perubahan (menempel di atas) */
.hp-editbar{position:sticky;top:var(--ui-sticky-top,0);z-index:6;background:var(--ui-panel);border:1px solid var(--ui-warn-line);border-left:4px solid var(--ui-warn);border-radius:var(--ui-radius);padding:10px 12px;display:flex;flex-direction:column;gap:8px;box-shadow:0 4px 12px rgba(0,0,0,.06)}
.hp-eb1{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;justify-content:space-between}
.hp-jml{font-weight:600}
.hp-chips{display:flex;flex-wrap:wrap;gap:6px;max-height:112px;overflow:auto}
.hp-chip{display:inline-flex;align-items:stretch;border:1px solid var(--ui-warn-line);background:var(--ui-warn-bg);border-radius:6px;font-size:12px;max-width:100%}
.ui-shell .hp .hp-chip button{border:0;background:none;color:var(--ui-text);font-weight:500;font-size:12px;display:inline-flex;align-items:center;min-height:30px;white-space:normal}
.ui-shell .hp .hp-chip .hp-cl{padding:0 4px 0 9px;gap:5px;min-width:0;text-align:left;flex-wrap:wrap}
.hp-cl small,.hp-cl s{color:var(--ui-muted-text)}
.ui-shell .hp .hp-chip .hp-cx{padding:0 9px;color:var(--ui-muted-text);font-size:15px;border-left:1px solid var(--ui-warn-line);border-radius:0}
.ui-shell .hp .hp-chip .hp-cx:hover{color:var(--ui-danger);background:none}
.hp-dtg{display:none}
/* Tab halaman: Pengaturan Gaji | Riwayat */
.hp-ptabs{display:flex;gap:4px;border-bottom:1px solid var(--ui-line);overflow-x:auto;overflow-y:hidden}
.ui-shell .hp .hp-ptabs button{border:0;border-radius:0;background:none;color:var(--ui-muted-text);padding:0 14px;min-height:42px;font-size:14px;font-weight:500;border-bottom:2px solid transparent;margin-bottom:-1px}
.ui-shell .hp .hp-ptabs button:hover{color:var(--ui-text);background:none}
.ui-shell .hp .hp-ptabs button[aria-selected=true]{color:var(--ui-text);font-weight:600;border-bottom-color:var(--ui-text)}
.hp-riw-hal h2{margin:0 0 12px}
/* Simulasi: kartu sendiri, bisa dibuka-tutup */
.hp-simk{padding:0}
.ui-shell .hp .hp-simh{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;border:0;background:none;color:var(--ui-text);min-height:52px;padding:0 16px;text-align:left;font-size:15px;font-weight:600}
.ui-shell .hp .hp-simh:hover{background:none}
.hp-ket{font-weight:400;color:var(--ui-muted-text);font-size:12px;margin-left:8px}
.hp-simk .hp-simrow{border-top:1px solid var(--ui-line);padding:14px 16px}
/* Riwayat */
.hp-jalur{display:flex;flex-direction:column;gap:6px}
.hp-trk{display:flex;height:30px;border-radius:6px;overflow:hidden;border:1px solid var(--ui-line)}
.hp-trk div{display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;min-width:26px;border-right:1px solid var(--ui-panel);overflow:hidden;white-space:nowrap}
.hp-trk .hp-s-lalu{background:var(--ui-hover);color:var(--ui-muted-text)}.hp-trk .hp-s-kini{background:var(--ui-ok-bg);color:var(--ui-ok)}.hp-trk .hp-s-nanti{background:var(--ui-warn-bg);color:var(--ui-warn)}
.hp-skala{display:flex;justify-content:space-between;font-size:11px;color:var(--ui-muted-text);gap:8px}
.hp-riw{display:flex;flex-direction:column;gap:10px}
.hp-vlist{display:flex;flex-direction:column;gap:8px}
.hp-ver{border:1px solid var(--ui-line);border-radius:8px;padding:10px 12px;display:flex;flex-direction:column;gap:5px;min-width:0}
.hp-ver.hp-batal{opacity:.6}
.hp-vtop{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center}
.hp-rng,.hp-als{font-size:13px;overflow-wrap:anywhere}
.hp-vact{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.ui-shell .hp .hp-link{border-color:transparent;background:none;color:var(--ui-info);padding:0 6px;font-weight:500}
.hp-diff{background:var(--ui-hover);border-radius:6px;padding:8px 10px;font-size:13px;display:flex;flex-direction:column;gap:3px}
.hp-diff s{color:var(--ui-danger)}.hp-diff b{color:var(--ui-ok)}
.hp-g{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--ui-muted-text);margin-top:4px}
.hp-g:first-child{margin-top:0}
/* Garis waktu */
.hp-kartu{display:flex;flex-direction:column;gap:12px}
.hp-legend{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--ui-muted-text)}
.hp-lrow{display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px}
.hp-lrow span{display:inline-flex;align-items:center;gap:6px;min-height:20px}
.hp-lrow .hp-lgt{font-weight:600;color:var(--ui-text);min-width:104px}
.hp-lrow i{display:inline-block;width:14px;height:10px;border-radius:2px;border:1px solid}
.hp-lg-sesi{background:var(--ui-info-bg);border-color:var(--ui-info-line)}.hp-lg-ist{background:var(--ui-warn-bg);border-color:var(--ui-warn-line)}
.hp-lg-lem{background:var(--ui-ok-bg);border-color:var(--ui-ok-line)}.hp-lg-sto{background:var(--ui-danger-bg);border-color:var(--ui-danger-line)}
.hp-lg-k{background:var(--ui-info);border-color:var(--ui-info)}.hp-lg-cut{background:var(--ui-danger);border-color:var(--ui-danger)}
.hp-lg-wait{background:var(--ui-line);border-color:var(--ui-button-line)}.hp-lg-lk{background:var(--ui-ok);border-color:var(--ui-ok)}.hp-lg-sk{background:var(--ui-warn);border-color:var(--ui-warn)}
.hp-lrow i.hp-lg-chg{background:var(--ui-warn);border-color:var(--ui-warn);width:8px;height:8px;border-radius:50%}
.hp-svgw{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--ui-line);border-radius:8px;background:var(--ui-panel)}
/* HL7b: gulir di layar ini tipis seperti sidebar Owner (style-kerangka.css): 6 px, tanpa tombol panah, track sewarna panel */
:is(.hp-svgw,.hp-ptabs,.hp-chips,.hp-dialog .hp-diff)::-webkit-scrollbar{width:6px;height:6px}
:is(.hp-svgw,.hp-ptabs,.hp-chips,.hp-dialog .hp-diff)::-webkit-scrollbar-track,:is(.hp-svgw,.hp-ptabs,.hp-chips,.hp-dialog .hp-diff)::-webkit-scrollbar-corner{background:var(--ui-panel)}
:is(.hp-svgw,.hp-ptabs,.hp-chips,.hp-dialog .hp-diff)::-webkit-scrollbar-thumb{background:#D2D2D2;border-radius:6px}
:is(.hp-svgw,.hp-ptabs,.hp-chips,.hp-dialog .hp-diff)::-webkit-scrollbar-thumb:hover{background:#BDBDBD}
:is(.hp-svgw,.hp-ptabs,.hp-chips,.hp-dialog .hp-diff)::-webkit-scrollbar-button{display:none;width:0;height:0}
@supports not selector(::-webkit-scrollbar){:is(.hp-svgw,.hp-ptabs,.hp-chips,.hp-dialog .hp-diff){scrollbar-width:thin;scrollbar-color:#D2D2D2 var(--ui-panel)}}
#hp-svg svg{display:block}
.hp-tl text{font-family:var(--ui-font);font-size:12px;fill:var(--ui-text);dominant-baseline:central}
.hp-tl .ax{fill:var(--ui-muted-text);font-size:11px}
.hp-tl .lane{fill:var(--ui-muted-text);font-size:11px;font-weight:600;letter-spacing:.06em}
.hp-tl .grid{stroke:var(--ui-line);stroke-width:1}
.hp-tl .sep{stroke:var(--ui-button-line);stroke-width:1;stroke-dasharray:4 4}
.hp-tl .b-sesi{fill:var(--ui-info-bg);stroke:var(--ui-info-line)}
.hp-tl .b-ist{fill:var(--ui-warn-bg);stroke:var(--ui-warn-line)}
.hp-tl .b-lem{fill:var(--ui-ok-bg);stroke:var(--ui-ok-line)}
.hp-tl .b-sto{fill:var(--ui-danger-bg);stroke:var(--ui-danger-line)}
.hp-tl .bd{stroke-width:1.2}
.hp-tl .bag{cursor:pointer;outline:none}
.hp-tl .bag:hover .bd,.hp-tl .bag:focus-visible .bd{stroke:var(--ui-muted-text)}
.hp-tl .bag.sel .bd{stroke:var(--ui-text);stroke-width:2}
.hp-tl .bag.off{opacity:.4}
.hp-tl .mk line{stroke:var(--ui-muted-text);stroke-width:1.2;stroke-dasharray:3 2}
.hp-tl .mk text{font-size:11px;font-weight:600}
.hp-tl .mk.sel line{stroke:var(--ui-text);stroke-width:2;stroke-dasharray:none}
.hp-tl .mk:hover line,.hp-tl .mk:focus-visible line{stroke:var(--ui-text)}
.hp-tl .mk.chg text{fill:var(--ui-warn)}
.hp-tl .cdot{fill:var(--ui-warn);stroke:var(--ui-panel);stroke-width:1.5}
.hp-tl .hit{fill:transparent}
.hp-tl .ghost{fill:none;stroke:var(--ui-warn);stroke-width:1.2;stroke-dasharray:4 3;pointer-events:none}
.hp-tl .k{fill:var(--ui-info)}.hp-tl .cut{fill:var(--ui-danger)}.hp-tl .wait{fill:var(--ui-line);stroke:var(--ui-button-line)}.hp-tl .lk{fill:var(--ui-ok)}.hp-tl .sk{fill:var(--ui-warn)}
.hp-tl .gap{stroke:var(--ui-muted-text);stroke-width:1.2;stroke-dasharray:3 3}
.hp-tl .base{stroke:var(--ui-line);stroke-width:1}
.hp-tl .dot{fill:var(--ui-panel);stroke:var(--ui-text);stroke-width:1.8}
.hp-tl .tj{font-size:11px}
.hp-tl .tc{font-size:11px;fill:var(--ui-danger);font-weight:600}
.hp-tl .tm{font-size:11px;fill:var(--ui-muted-text)}
.hp-aedit{border:1px solid var(--ui-button-line);border-radius:var(--ui-radius);padding:12px 14px;background:var(--ui-panel)}
.hp-aeh{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;margin-bottom:6px}
.hp-aeh h3{margin:0;font-size:14px}
.hp-simrow{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:16px}
.hp-simrow .hp-sub{margin-bottom:8px}
.hp .hp-lbl{display:block;font-size:12px;margin-bottom:4px}
.hp #hp-s-contoh{width:100%}
/* HL7c: Contoh absen dibungkus searchable-select (input .pss-input); ikut 36 px/13 px isian jam di baris 31, padding kanan untuk panah */
.hp .pss>.pss-input{padding-right:38px;text-overflow:ellipsis}
.hp-jam6{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 10px;margin-top:8px}
.hp .hp-jam6 label{display:flex;flex-direction:column;gap:4px;font-size:12px;font-weight:400;color:var(--ui-muted-text);min-width:0}
.hp .hp-jam6 input{width:100%}
.hp .hp-ck{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:400;margin-top:10px;cursor:pointer}
.hp-hasil{display:flex;flex-direction:column;gap:8px;min-width:0}
.hp-pakai{font-size:12px;color:var(--ui-muted-text)}
.hp-angka{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.hp-angka.hp-dua{grid-template-columns:repeat(2,minmax(0,1fr))}
.hp-ang{background:var(--ui-hover);border:1px solid transparent;border-radius:8px;padding:6px 10px;min-width:0}
.hp-ang.hp-ub{background:var(--ui-warn-bg);border-color:var(--ui-warn-line)}
.hp-ang small{display:block;font-size:12px;color:var(--ui-muted-text);text-transform:uppercase;letter-spacing:.05em}
.hp-ang b{font-size:18px;font-weight:600}
.hp-sb{display:block;font-size:12px;color:var(--ui-muted-text)}
.hp-ubah{font-weight:600}.hp-naik{color:var(--ui-ok)}.hp-turun{color:var(--ui-danger)}
.hp-lk summary{cursor:pointer;font-size:13px;color:var(--ui-info);font-weight:600}
.hp-lk ol{margin:6px 0 0;padding-left:18px;font-size:13px;display:flex;flex-direction:column;gap:3px}
.hp-dampak{font-size:13px;display:flex;flex-direction:column;gap:4px}
/* HL7b: dampak = daftar dua kolom (bukan tabel data; KONTRAK-UI aturan 1 dan 3 tidak berlaku) */
.hp-dlist{margin:0;padding:0;list-style:none}
.hp-dlist li{display:flex;justify-content:space-between;gap:8px;padding:4px 0;border-bottom:1px solid var(--ui-line)}
.hp-dlist .hp-r{text-align:right;white-space:nowrap}
.hp-dampak s{color:var(--ui-muted-text)}
.hp-lain{background:var(--ui-panel);border:1px solid var(--ui-line);border-radius:var(--ui-radius)}
.hp-lain>summary{cursor:pointer;padding:0 16px;min-height:52px;font-size:15px;font-weight:600;display:flex;gap:10px;align-items:center;justify-content:space-between;list-style:none}
.hp-lain>summary::-webkit-details-marker{display:none}
.hp-lain>summary .hp-chev::after{content:'▼'}
.hp-lain[open]>summary .hp-chev::after{content:'▲'}
.hp-lain[open]>summary{border-bottom:1px solid var(--ui-line);margin-bottom:14px}
.hp-lain-isi{display:grid;grid-template-columns:repeat(auto-fill,minmax(520px,1fr));gap:12px;padding:0 16px 16px}
.hp-lg{border:1px solid var(--ui-line);border-radius:8px;padding:10px 8px 6px;min-width:0}
.hp-lgh{display:flex;justify-content:space-between;align-items:center;gap:8px;min-height:30px;padding:0 4px 4px}
.hp-lg .hp-fgrid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.hp-badge{min-width:20px;height:20px;border-radius:10px;background:var(--ui-warn);color:var(--ui-panel);font-size:11px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;padding:0 6px;margin-left:6px}
/* Dialog simpan / aktifkan lagi / batalkan: komponen dialog HL (.hl-dialog-sempit), isian bertumpuk */
.hp-dialog form{display:flex;flex-direction:column;gap:10px}
.hp-dialog label{display:flex;flex-direction:column;gap:4px;margin:0;font-size:13px;color:var(--ui-muted-text)}
.hp-dialog textarea{min-height:64px;resize:vertical;width:100%}
.hp-dialog .hp-diff{max-height:220px;overflow:auto}
@media(max-width:1100px){.hp-lain-isi{grid-template-columns:minmax(0,1fr)}}
@media(max-width:760px){
.hp-simrow{grid-template-columns:minmax(0,1fr)}
.hp-fgrid,.hp-tgrid,.hp-lg .hp-fgrid{grid-template-columns:minmax(0,1fr)}
.hp-chips{max-height:none}
.hp-dtg{display:inline-flex}
.hp-editbar.hp-tutup .hp-chips{display:none}
.hp-eb1 .hp-acts{width:100%}
.hp-eb1 .hp-acts button{flex:1}
.hp-lain-isi{padding:0 10px 12px}
}
@media(prefers-reduced-motion:reduce){.hp input.hp-sw,.hp input.hp-sw::after{transition:none}}