/* DISTRIBUSI HP — the office Distribusi screens at phone width (≤767px) in Mode Lapangan's Liquid Glass
   (spec docs/superpowers/specs/2026-10-27-distribusi-hp-liquid-glass-design.md; values from the approved
   mockup, which takes them from dist-field.css). Tokens + font come from dist-field.css (.dhp-root /
   .dhp-tok share them); every colour here is one of dist-field.css's or the mockup's. Prefix dhp-. */
@media (max-width: 767px) {
  .dhp-root { position: fixed; inset: 0; z-index: 30; overflow-y: auto; overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch; background: var(--mlap-bg); padding: 0 0 calc(130px + env(safe-area-inset-bottom)); box-sizing: border-box; -webkit-font-smoothing: antialiased; }
  .dhp-root *, .dhp-tok * { box-sizing: border-box; }
  :where(.dhp-tok, .dhp-root) :where(button, input, select, textarea) { font-family: inherit; }   /* zero specificity: never beats a .mlap-* size */
  body.dhp-full { background: #EEF2F6; }

  /* large title that scrolls with the list (mockup .head / .eyebrow) */
  .dhp-head { display: flex; align-items: flex-start; gap: 8px; padding: calc(6px + env(safe-area-inset-top)) 16px 6px; }
  .dhp-head h1 { margin: 0; flex: 1; min-width: 0; padding: 5px 0 0 4px; font-size: clamp(22px, 7.2vw, 28px); line-height: 34px; font-weight: 700; letter-spacing: -.02em; overflow-wrap: anywhere; }
  .dhp-head-r { display: flex; gap: 8px; flex: none; }
  .dhp-eyebrow { font-size: 13px; color: var(--mlap-sub); font-weight: 600; padding: 0 16px 8px; font-variant-numeric: tabular-nums; }

  /* glass title bar of a detail / task screen (mockup .top) */
  .dhp-top { grid-template-columns: 70px minmax(0, 1fr) 70px; padding-left: 16px; padding-right: 16px; }
  .dhp-top-t { margin: 0; font-size: 16px; line-height: 20px; font-weight: 600; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity .2s ease; }
  .dhp-top-t.off { opacity: 0; }
  .dhp-top-r { display: flex; justify-content: flex-end; gap: 8px; }

  .dhp-round { position: relative; flex: none; padding: 0; }
  .dhp-dot { position: absolute; top: 6px; right: 7px; width: 9px; height: 9px; border-radius: 50%; background: #E5484D; border: 2px solid #FFFFFF; }

  /* chips (mockup .chips / .chip) */
  .dhp-chips { display: flex; gap: 6px; padding: 0 16px 10px; overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
  .dhp-chips::-webkit-scrollbar { display: none; }
  .dhp-chip { height: 30px; display: inline-flex; align-items: center; gap: 5px; padding: 0 12px; border-radius: 15px; border: 0; background: var(--mlap-surface); font-size: 13px; font-weight: 600; flex: none; color: var(--mlap-ink); cursor: pointer; }
  .dhp-chip.on { background: var(--mlap-accent); color: #FFFFFF; }
  .dhp-chip.x { background: var(--mlap-accent-soft); color: var(--mlap-accent); }
  .dhp-chip.bon { background: var(--mlap-bon-soft); color: var(--mlap-bon); }

  /* equal-width segments (mockup .seg) */
  .dhp-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px; padding: 3px; border-radius: 12px; background: #E3E9EE; margin: 0 16px 12px; }
  .dhp-seg button { min-height: 38px; border: 0; border-radius: 9px; background: transparent; font-size: 14px; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 4px; color: var(--mlap-ink); cursor: pointer; padding: 0 4px; min-width: 0; }
  .dhp-seg button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .dhp-seg button.on { background: var(--mlap-surface); box-shadow: 0 1px 3px rgba(14,27,36,.12); }

  /* floating search + Filter (mockup .searchpill) */
  .dhp-searchpill { display: flex; align-items: center; gap: 8px; padding: 0 6px 0 16px; }
  .dhp-searchpill input { flex: 1; min-width: 0; height: 44px; border: 0; background: transparent; font-size: 16px; color: var(--mlap-ink); outline: none; -webkit-appearance: none; appearance: none; }
  .dhp-searchpill input::placeholder { color: #7A8A94; }
  .dhp-searchpill.raised { bottom: calc(var(--dhp-kb, 0px) + 12px); }
  .dhp-fb { height: 36px; border: 0; border-radius: 18px; padding: 0 12px; display: flex; align-items: center; gap: 5px; background: var(--mlap-accent-soft); color: var(--mlap-accent); font-weight: 600; font-size: 14px; flex: none; cursor: pointer; }
  .dhp-fb b { background: var(--mlap-accent); color: #FFFFFF; border-radius: 9px; font-size: 11px; padding: 1px 6px; }

  /* sheets (mockup .sheet) */
  .dhp-sheet { display: flex; flex-direction: column; }
  .dhp-sheet-t { margin: 4px 0 10px; font-size: 20px; font-weight: 700; letter-spacing: -.01em; }
  .dhp-sheet-sub { margin: -6px 0 10px; font-size: 13px; color: var(--mlap-sub); }
  .dhp-sheet-body { overflow-y: auto; min-height: 0; flex: 1; overscroll-behavior: contain; }
  .dhp-sheet-cta { display: flex; gap: 8px; padding-top: 8px; }
  .dhp-sheet-cta .mlap-btn { flex: 1; min-height: 50px; border-radius: 15px; }
  .dhp-lbl { font-size: 13px; font-weight: 600; color: var(--mlap-sub); padding: 6px 4px 6px; text-transform: uppercase; letter-spacing: .03em; }
  .dhp-menu-card { margin: 0 0 10px; }
  .dhp-mi { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 0 12px; border: 0; border-bottom: 1px solid var(--mlap-line); background: transparent; font-size: 15px; font-weight: 500; color: var(--mlap-ink); text-align: left; cursor: pointer; }
  .dhp-mi:last-child { border-bottom: 0; }
  .dhp-mi.neg { color: var(--mlap-neg); }
  .dhp-mi-ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--mlap-bg); color: var(--mlap-accent); flex: none; }
  .dhp-mi.neg .dhp-mi-ic { color: var(--mlap-neg); }
  .dhp-mi-t { flex: 1; min-width: 0; }

  /* the + menu (mockup .menu / .tiles / .tile) */
  .dhp-catat-menu { padding: 12px; background: rgba(255,255,255,.72); width: min(432px, calc(100vw - 48px)); }
  .dhp-catat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .dhp-tile { min-height: 0; align-items: flex-start; justify-content: flex-start; text-align: left; padding: 12px; gap: 6px; font-size: 14px; background: var(--mlap-surface); box-shadow: none; }
  .dhp-tile small { font-size: 12px; color: var(--mlap-sub); font-weight: 500; }
  .dhp-tile-ic { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; }
  .dhp-tile-ic.teal { background: var(--mlap-teal-soft); color: var(--mlap-teal-ink); }
  .dhp-tile-ic.accent { background: var(--mlap-accent-soft); color: var(--mlap-accent); }
  .dhp-tile-ic.warn { background: var(--mlap-warn-soft); color: var(--mlap-warn); }
  .dhp-tile-ic.neg { background: var(--mlap-neg-soft); color: var(--mlap-neg); }

  /* the dock's + sits INSIDE the dock (mockup .catat 58×54), centred on its gap (--dhp-cx) */
  .dhp-dockhost .mlap-catat { width: 58px; height: 54px; border-radius: 27px; left: var(--dhp-cx, 50%); margin-left: -29px; bottom: calc(20px + env(safe-area-inset-bottom)); }
  /* the shell while the HP view is on (finance-shell.jsx): the Distribusi dock replaces the app's bottom
     nav on every dist-* screen; a redesigned screen covers the topbar with its own glass chrome */
  body.dhp-dock .mobile-nav { display: none !important; }
  body.dhp-dock .content { padding-bottom: calc(100px + env(safe-area-inset-bottom)); }
  body.dhp-full .topbar { visibility: hidden; }
  .dhp-try { margin: 0 0 12px; }
  .dhp-drawer-x { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 8px 4px; }
  .dhp-drawer-sw { min-height: 44px; border-radius: 12px; border: 1px solid var(--border, #EDF1F4); background: transparent; color: #065489; font: inherit; font-weight: 600; font-size: 14px; padding: 0 12px; text-align: left; cursor: pointer; }
  /* CATAT forms (boards 3b / 3c): full screen over the dock; mockup .fld / .payg / .rowi / .sumline */
  .dhp-entry { position: fixed; inset: 0; z-index: 50; overflow-y: auto; overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch; background: var(--mlap-bg); -webkit-font-smoothing: antialiased; }
  .dhp-entry-body { padding: 4px 0 24px; }
  .dhp-card { margin: 0 16px 10px; }
  .dhp-lbl-pad { padding: 4px 20px 6px; }
  .dhp-fld { width: 100%; min-height: 52px; display: flex; align-items: center; gap: 10px; padding: 6px 12px; border: 0; border-bottom: 1px solid var(--mlap-line); background: transparent; color: var(--mlap-ink); text-align: left; }
  .dhp-fld:last-child { border-bottom: 0; }
  button.dhp-fld { cursor: pointer; }
  .dhp-fld > svg { color: var(--mlap-sub); flex: none; }
  .dhp-lb { flex: 1; min-width: 0; font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
  .dhp-lb small { display: block; font-size: 12px; font-weight: 400; color: var(--mlap-sub); }
  .dhp-lb.sub { color: var(--mlap-sub); font-weight: 500; font-size: 13.5px; display: flex; align-items: center; gap: 4px; }
  .dhp-v { font-size: 15px; color: var(--mlap-ink); text-align: right; font-variant-numeric: tabular-nums; }
  .dhp-num, .dhp-txt, .dhp-date { border: 0; background: transparent; color: var(--mlap-ink); font-size: 16px; text-align: right; min-width: 0; outline: none; }
  .dhp-num { width: 72px; font-variant-numeric: tabular-nums; }
  .dhp-txt { flex: 1.4; }
  .dhp-txt::placeholder { color: #9AA8B1; }
  .dhp-ini { width: 40px; height: 40px; border-radius: 12px; background: var(--mlap-teal-soft); color: var(--mlap-teal-ink); font-weight: 700; font-size: 14px; display: grid; place-items: center; flex: none; }
  .dhp-ini.sm { width: 36px; height: 36px; }
  .dhp-payg { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin: 0 16px 12px; }
  .dhp-payg button { background: var(--mlap-surface); border-radius: 14px; padding: 9px 6px; text-align: center; font-size: 14px; font-weight: 600; border: 2px solid transparent; color: var(--mlap-ink); cursor: pointer; min-height: 52px; }
  .dhp-payg button small { display: block; font-size: 11.5px; color: var(--mlap-sub); font-weight: 500; }
  .dhp-payg button.on { border-color: var(--mlap-teal-ink); background: var(--mlap-teal-soft); color: var(--mlap-teal-ink); }
  .dhp-entry .mlap-photo { margin: 0 16px 12px; }
  .dhp-rowi { width: 100%; min-height: 52px; display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 0; border-bottom: 1px solid var(--mlap-line); background: transparent; color: var(--mlap-ink); text-align: left; cursor: pointer; }
  .dhp-rowi:last-child { border-bottom: 0; }
  .dhp-rowi:disabled { opacity: .55; cursor: default; }
  .dhp-grow { flex: 1; min-width: 0; }
  .dhp-nm { display: block; font-size: 15px; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
  .dhp-sbt { display: block; font-size: 12px; color: var(--mlap-sub); margin-top: 2px; }
  .dhp-tag { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 10px; font-size: 11.5px; font-weight: 600; white-space: nowrap; flex: none; font-variant-numeric: tabular-nums; }
  .dhp-tag.bon { background: var(--mlap-bon-soft); color: var(--mlap-bon); }
  .dhp-tag.l { background: var(--mlap-teal-soft); color: var(--mlap-teal-ink); }
  .dhp-tag.p { background: var(--mlap-accent-soft); color: var(--mlap-accent); }
  .dhp-tag.w { background: var(--mlap-warn-soft); color: var(--mlap-warn); }
  .dhp-tag.ok { background: var(--mlap-ok-soft); color: var(--mlap-ok); }
  .dhp-entry .mlap-ctabar { bottom: calc(28px + env(safe-area-inset-bottom) + var(--dhp-kb, 0px)); }
  .dhp-entry .mlap-ctafade { height: calc(190px + env(safe-area-inset-bottom) + var(--dhp-kb, 0px)); }
  .dhp-ctaspace { height: 150px; }
  .dhp-sumline { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 0 4px; }
  .dhp-sumline small { font-size: 13px; color: var(--mlap-sub); font-weight: 600; min-width: 0; }
  .dhp-sumline b { font-size: 22px; font-variant-numeric: tabular-nums; letter-spacing: -.01em; white-space: nowrap; }
  .dhp-ctarow { display: flex; gap: 8px; }
  .dhp-ctarow .mlap-btn { flex: 1; }
  .dhp-saved { display: flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--mlap-ok); padding: 0 4px; }
  .dhp-err { margin: 0 16px 10px; }
  .dhp-entry .dhp-searchpill.raised { bottom: calc(var(--dhp-kb, 0px) + 16px + env(safe-area-inset-bottom)); }
  .dhp-entry .dhp-searchpill.raised:focus-within { box-shadow: 0 0 0 2px #065489, 0 8px 28px rgba(6,51,79,.16); }
  /* one typeface (spec §2.3): the app's heading font never reaches the HP view */
  .dhp-tok :is(h1, h2, h3), .dhp-root :is(h1, h2, h3) { font-family: inherit; }
  .dhp-clear { width: 32px; height: 32px; border: 0; border-radius: 16px; background: transparent; color: var(--mlap-sub); display: grid; place-items: center; flex: none; cursor: pointer; }
  .dhp-pickbody { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  .dhp-datefld { position: relative; }
  .dhp-date-over { position: absolute; inset: 0; width: 100%; opacity: 0; border: 0; cursor: pointer; font-size: 16px; }
  /* Bayar Bon / Ganti Rugi / Pengeluaran (same pattern as board 3b) */
  .dhp-payg.c2 { grid-template-columns: 1fr 1fr; }
  .dhp-payg.c4 { grid-template-columns: 1fr 1fr 1fr 1fr; gap: 6px; }
  .dhp-payg.c4 button { padding: 9px 2px; font-size: 13.5px; }
  .dhp-money { display: flex; align-items: baseline; gap: 4px; color: var(--mlap-sub); font-size: 15px; font-weight: 600; flex: none; }
  .dhp-num.wide { max-width: 160px; font-weight: 600; color: var(--mlap-ink); }
  .dhp-bon { color: var(--mlap-bon); font-weight: 600; }
  .dhp-link { color: var(--mlap-accent); font-size: 14px; font-weight: 600; justify-content: flex-start; }
  .dhp-wrap { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px 12px; }
  /* Data Pelanggan (board 1): mockup .card / .ct / .code / .amt / .acts / .act. Nothing sticks on top until
     the large title has scrolled away; then the small title bar fades in. */
  .dhp-float { position: fixed; top: 0; left: 0; right: 0; z-index: 20; opacity: 0; pointer-events: none; transition: opacity .2s ease; }
  .dhp-float.on { opacity: 1; pointer-events: auto; }
  .dhp-ct { width: 100%; display: flex; gap: 10px; align-items: flex-start; padding: 12px 12px 10px; border: 0; background: transparent; color: var(--mlap-ink); text-align: left; cursor: pointer; }
  .dhp-code { display: block; font-size: 11.5px; font-weight: 600; color: var(--mlap-sub); }
  .dhp-amt { flex: none; max-width: 48%; display: flex; flex-direction: column; align-items: flex-end; text-align: right; font-variant-numeric: tabular-nums; }
  .dhp-amt small { font-size: 12px; color: var(--mlap-sub); margin-top: 2px; }
  .dhp-ctags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
  .dhp-ctags .dhp-tag:not(.w) { background: var(--mlap-bg); color: var(--mlap-sub); }
  .dhp-ccard.off .dhp-ct { opacity: .62; }
  .dhp-acts { display: flex; gap: 6px; padding: 0 12px 12px; }
  .dhp-act { flex: 1; min-width: 0; height: 40px; border: 0; border-radius: 12px; background: var(--mlap-bg); display: flex; align-items: center; justify-content: center; gap: 5px; font-size: 13.5px; font-weight: 600; color: var(--mlap-ink); white-space: nowrap; overflow: hidden; text-decoration: none; cursor: pointer; }
  .dhp-act.pri { flex: 1.5; background: var(--mlap-accent); color: #FFFFFF; }
  .dhp-act.off { opacity: .4; cursor: default; }
  .dhp-gapacts { display: flex; gap: 8px; padding: 0 16px 10px; }
  .dhp-gapacts .mlap-btn { flex: 1; min-width: 0; min-height: 44px; font-size: 14px; }
  .dhp-cust .mlap-empty { padding: 28px 16px; }
  .dhp-cust .mlap-empty .mlap-btn { margin-top: 12px; }
  .dhp-skel { height: 118px; margin: 0 16px 10px; border-radius: 16px; background: linear-gradient(90deg, var(--mlap-surface) 0%, var(--mlap-bg) 50%, var(--mlap-surface) 100%); background-size: 200% 100%; animation: dhp-skel 1.2s ease-in-out infinite; }
  @keyframes dhp-skel { from { background-position: 100% 0; } to { background-position: -100% 0; } }
  .dhp-sentinel { height: 1px; }
  .dhp-more { text-align: center; font-size: 12px; color: var(--mlap-sub); padding: 4px 16px 12px; }
  /* Filter sheet (board 1b) */
  .dhp-sheet .dhp-wrap { padding: 0 0 8px; }
  .dhp-sheet .dhp-card { margin: 4px 0 10px; }
  .dhp-sheet .dhp-lbl { padding: 4px 4px 6px; }
  .dhp-sheet-cta .mlap-btn.primary { flex: 2; }
  .dhp-sel { flex: 0 1 auto; min-width: 0; max-width: 55%; border: 0; background: transparent; color: var(--mlap-ink); font-size: 15px; text-align: right; text-align-last: right; -webkit-appearance: none; appearance: none; outline: none; cursor: pointer; }
  /* Ubah / Tambah Pelanggan (board 6): label left (96px, muted), value right of it, left-aligned */
  .dhp-frow .dhp-fk { flex: none; width: 96px; font-size: 15px; font-weight: 500; color: var(--mlap-sub); }
  .dhp-frow .dhp-fv { flex: 1; min-width: 0; max-width: none; text-align: left; text-align-last: left; font-size: 16px; }
  .dhp-wa { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; font-size: 16px; color: var(--mlap-ink); }
  .dhp-watest { gap: 3px; height: 26px; padding: 0 9px; border-radius: 13px; text-decoration: none; }
  .dhp-custedit .mlap-minicap:empty { display: none; }
  .dhp-lb.sub2 { font-size: 13px; font-weight: 500; color: var(--mlap-sub); font-variant-numeric: tabular-nums; }
  .dhp-pinbtn { flex: none; min-height: 36px; padding: 0 12px; font-size: 13.5px; border-radius: 12px; }
  .dhp-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; padding: 8px 12px 12px; border-bottom: 1px solid var(--mlap-line); }
  .dhp-days button { min-width: 0; height: 36px; border: 0; border-radius: 10px; background: var(--mlap-bg); font-size: 12.5px; font-weight: 600; color: var(--mlap-ink); cursor: pointer; padding: 0; }
  .dhp-days button.on { background: var(--mlap-accent); color: #FFFFFF; }
  .dhp-sw { flex: none; position: relative; width: 51px; height: 31px; margin: 0; border-radius: 16px; background: #E3E9EE; -webkit-appearance: none; appearance: none; cursor: pointer; transition: background .2s ease; }
  .dhp-sw::after { content: ''; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 2px 6px rgba(14,27,36,.2); transition: transform .2s ease; }
  .dhp-sw:checked { background: var(--mlap-accent); }
  .dhp-sw:checked::after { transform: translateX(20px); }
  .dhp-sw:focus-visible { outline: 2px solid var(--mlap-accent); outline-offset: 2px; }
  .dhp-fcol { flex-direction: column; align-items: stretch; gap: 8px; padding-top: 10px; padding-bottom: 12px; }
  .dhp-wrap0 { display: flex; flex-wrap: wrap; gap: 6px; }
  .dhp-wrap0 .dhp-chip { background: var(--mlap-bg); }
  .dhp-wrap0 .dhp-chip.on { background: var(--mlap-accent); }
  .dhp-hint { font-size: 12px; color: var(--mlap-sub); }
  /* Atur titik (boards 6b / 6c): Mode Lapangan's map screen; the history pill sits under the glass bar */
  .dhp-pin { overflow: hidden; }
  .dhp-histrow { width: 100%; min-height: 44px; display: flex; align-items: center; gap: 8px; padding: 0 4px; border: 0; background: transparent; color: var(--mlap-accent); font-size: 14px; font-weight: 600; text-align: left; cursor: pointer; }
  .dhp-histrow span { flex: 1; min-width: 0; }
  .dhp-pinwarn { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 12px; background: var(--mlap-warn-soft); color: var(--mlap-warn); line-height: 1.4; }
  .dhp-pinwarn svg { flex: none; margin-top: 2px; }
  .dhp-sheet .dhp-hist .mlap-kv { min-height: 44px; font-size: 13.5px; }
  .dhp-hist .mlap-kv span { min-width: 0; overflow-wrap: anywhere; }
  .dhp-hist .mlap-kv b { flex: none; font-variant-numeric: tabular-nums; }
  /* Detail Pelanggan (boards 5 / 5e): mockup name 22/28, .kpis / .kpi, .qa, .grpH, .kv */
  .dhp-detail .dhp-top { position: sticky; }
  .dhp-dhead { padding: 6px 16px 12px; }
  .dhp-dname { margin: 0 0 6px; font-size: 22px; line-height: 28px; font-weight: 700; letter-spacing: -.01em; overflow-wrap: anywhere; }
  .dhp-dhead .dhp-chip { background: var(--mlap-surface); }
  .dhp-chip.sm { height: 26px; font-size: 12px; padding: 0 10px; gap: 4px; }
  .dhp-chip.sm .cd-copy, .dhp-chip.sm button { min-height: 0; }
  .dhp-chip.neg { background: var(--mlap-neg-soft); color: var(--mlap-neg); }
  .dhp-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 16px 10px; }
  .dhp-kpi { background: var(--mlap-surface); border-radius: 16px; padding: 10px 12px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
  .dhp-kpi small { font-size: 12px; color: var(--mlap-sub); font-weight: 600; }
  .dhp-kpi b { font-size: 22px; font-variant-numeric: tabular-nums; letter-spacing: -.01em; margin: 2px 0 1px; max-width: 100%; overflow-wrap: anywhere; line-height: 1.15; }
  .dhp-kpi.bon { background: var(--mlap-bon-soft); }
  .dhp-kpi.bon b { color: var(--mlap-bon); }
  .dhp-kpia { border: 0; background: transparent; padding: 2px 0; min-height: 28px; font-size: 12.5px; font-weight: 600; color: var(--mlap-accent); cursor: pointer; text-align: left; }
  .dhp-qa { display: grid; gap: 8px; margin: 0 16px 12px; }
  .dhp-qa-b { min-width: 0; height: 64px; border: 0; border-radius: 16px; background: var(--mlap-surface); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 12px; font-weight: 600; color: var(--mlap-ink); text-decoration: none; cursor: pointer; padding: 0 4px; }
  .dhp-qa-b.pri { background: var(--mlap-accent); color: #FFFFFF; }
  .dhp-banner { width: calc(100% - 32px); margin: 0 16px 12px; display: flex; align-items: center; gap: 8px; border: 0; text-align: left; cursor: pointer; font-size: 13.5px; }
  .dhp-banner span { flex: 1; min-width: 0; }
  .dhp-banner.warn { background: var(--mlap-warn-soft); color: var(--mlap-warn); }
  .dhp-grph { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: var(--mlap-sub); padding: 12px 20px 6px; text-transform: uppercase; letter-spacing: .03em; }
  .dhp-grph button { border: 0; background: transparent; color: var(--mlap-accent); font-size: 12.5px; font-weight: 600; text-transform: none; letter-spacing: 0; min-height: 32px; cursor: pointer; }
  .dhp-rowi .dhp-amt b { font-size: 15px; font-weight: 600; }
  .dhp-rowi .dhp-amt .dhp-tag { margin-top: 3px; }
  .dhp-rowi.void .dhp-nm, .dhp-rowi.void .dhp-amt b { text-decoration: line-through; color: var(--mlap-sub); }
  .dhp-inv { cursor: default; }
  a.dhp-mini { display: inline-flex; align-items: center; text-decoration: none; }
  .dhp-mini { flex: none; min-height: 36px; padding: 0 10px; border: 0; border-radius: 10px; background: var(--mlap-accent-soft); color: var(--mlap-accent); font-size: 13px; font-weight: 600; cursor: pointer; }
  .dhp-mini.neg { background: var(--mlap-neg-soft); color: var(--mlap-neg); }
  .dhp-detail .mlap-kv b { text-align: right; min-width: 0; overflow-wrap: anywhere; }
  .dhp-detail .dhp-acts { padding-top: 10px; }
  .dhp-days.ro span { height: 36px; border-radius: 10px; background: var(--mlap-bg); display: grid; place-items: center; font-size: 12.5px; font-weight: 600; color: var(--mlap-sub); }
  .dhp-days.ro span.on { background: var(--mlap-accent); color: #FFFFFF; }
  .dhp-locphoto { padding: 8px 12px 12px; }
  .dhp-act-row { cursor: default; }
  /* Transaksi tab + rincian sheet (boards 5b / 5c) */
  .dhp-txtab { padding-bottom: 8px; }
  .dhp-txchips .dhp-chip { gap: 4px; }
  .dhp-grph-r { text-transform: none; letter-spacing: 0; font-variant-numeric: tabular-nums; color: var(--mlap-ink); }
  .dhp-pick.off { opacity: .45; }
  .dhp-check { width: 24px; height: 24px; border-radius: 7px; border: 2px solid #C9D3DA; display: grid; place-items: center; flex: none; color: #FFFFFF; }
  .dhp-pick.on .dhp-check { background: var(--mlap-accent); border-color: var(--mlap-accent); }
  .dhp-range .dhp-fld input { font-size: 16px; }
  .dhp-txs-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
  .dhp-txs-top h2 { margin: 0; font-size: 28px; line-height: 34px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; min-width: 0; }
  .dhp-txs-top h2.struck { text-decoration: line-through; color: var(--mlap-sub); }
  .dhp-txs > .dhp-sbt { margin: 2px 0 12px; }
  .dhp-txs .dhp-card { margin: 0 0 10px; }
  .dhp-txs .mlap-kv b { text-align: right; min-width: 0; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
  .dhp-pend { display: flex; flex-direction: column; gap: 4px; margin: 0 0 10px; }
  .dhp-pend small { font-size: 12.5px; }
  .dhp-pend-act { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
  .dhp-sheet-cta .mlap-btn.dhp-sq { flex: none; width: 50px; padding: 0; }
  .dhp-ta { width: 100%; text-align: left; resize: vertical; min-height: 72px; font-family: inherit; }
  .dhp-bar { align-self: stretch; width: 4px; border-radius: 2px; flex: none; margin: 2px 0; background: var(--mlap-teal-ink); }
  .dhp-bar.bon { background: var(--mlap-bon); }
  .dhp-bar.p { background: var(--mlap-accent); }
  .dhp-bar.void { background: var(--mlap-neg); }
  .dhp-grph-r { color: var(--mlap-sub); font-weight: 600; }
  .dhp-sheet-cta .mlap-btn svg { flex: none; }
  /* Galon tab (board 5d): the counter style of Mode Lapangan (.mlap-stepper.big input, dist-field.css L302) */
  .dhp-galcard { text-align: center; padding: 14px 12px 12px; }
  .dhp-galcap { font-weight: 600; font-size: 13px; }
  .dhp-galbig { font-size: 44px; line-height: 48px; font-weight: 700; letter-spacing: -.03em; color: #0F6B66; font-variant-numeric: tabular-nums; }
  .dhp-galbtns { margin-top: 12px; }
  .dhp-galbtns .mlap-btn { flex: 1; min-width: 0; }
  .dhp-galic { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; flex: none; background: var(--mlap-teal-soft); color: var(--mlap-teal-ink); }
  .dhp-galic.adjust { background: var(--mlap-accent-soft); color: var(--mlap-accent); }
  .dhp-galic.damage { background: var(--mlap-neg-soft); color: var(--mlap-neg); }
  .dhp-galic.other { background: var(--mlap-bg); color: var(--mlap-sub); }
  .dhp-galrow { cursor: default; }
  .dhp-amt small { font-size: 12px; color: var(--mlap-sub); font-variant-numeric: tabular-nums; }
  .dhp-amt small.up { color: var(--mlap-bon); }
  .dhp-amt small.down { color: var(--mlap-ok); }
  .dhp-adjrow { cursor: default; }
  .dhp-adjrow.pending .dhp-nm::after { content: " •"; color: var(--mlap-warn); }
  .dhp-adjact { display: flex; gap: 6px; margin-top: 6px; }
  .dhp-adjact:empty { display: none; }
  .dhp-more-b { justify-content: center; }

  /* Daftar Transaksi (board 2) */
  .dhp-txlist .dhp-seg { margin-top: 4px; }
  .dhp-txlist .dhp-kpi b { font-size: clamp(17px, 5.6vw, 22px); }
  .dhp-txlist .dhp-kpi.long b { font-size: clamp(14px, 4.4vw, 17px); }   /* a 10-digit Rupiah stays whole in a half-width box at 320px */
  body.dhp-picking .dhp-dockhost { display: none; }   /* select mode: its bar replaces the dock */

  /* Pengiriman (boards 4, 4b) — mockup .prog / .meta / .no / .note / .act.sq */
  .dhp-kirim .dhp-chips .dhp-chip svg { flex: none; }
  .dhp-kprog { height: 6px; border-radius: 3px; background: #DCE4EA; overflow: hidden; margin: 0 16px 4px; }
  .dhp-kprog span { display: block; height: 100%; background: var(--mlap-ok); transition: width .3s ease; }
  .dhp-kprogline { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 13px; color: var(--mlap-sub); padding: 2px 20px 8px; font-weight: 500; font-variant-numeric: tabular-nums; }
  .dhp-kprogline b { color: var(--mlap-ink); }
  .dhp-kprogline button { border: 0; background: transparent; color: var(--mlap-sub); font-size: 13px; font-weight: 500; min-height: 32px; padding: 0; cursor: pointer; text-align: right; }
  .dhp-locoff { align-items: flex-start; }
  .dhp-locoff .mlap-btn { min-height: 34px; font-size: 13px; padding: 0 12px; flex: none; }
  .dhp-banner.ok { background: var(--mlap-ok-soft); color: var(--mlap-ok); }
  .dhp-routebar { padding: 10px 12px; }
  .dhp-acts0 { display: flex; gap: 6px; margin-top: 8px; }
  .dhp-stopno { width: 28px; height: 28px; border-radius: 9px; background: var(--mlap-bg); font-weight: 700; font-size: 13px; display: grid; place-items: center; flex: none; color: var(--mlap-sub); font-variant-numeric: tabular-nums; }
  .dhp-stopno.ok { background: var(--mlap-ok-soft); color: var(--mlap-ok); }
  .dhp-stopno.neg { background: var(--mlap-neg-soft); color: var(--mlap-neg); }
  .dhp-stop .dhp-tags { flex-direction: column; align-items: flex-end; margin-top: 0; }
  .dhp-sbt.neg { color: var(--mlap-warn); }
  .dhp-act.sq { flex: none; width: 44px; }
  .dhp-oldwrap { color: var(--mlap-ink); overflow-x: auto; max-width: 100%; }   /* old panels (RunPanel table) scroll inside the sheet, never past the screen */
  .dhp-rangeline { display: block; margin: -4px 16px 10px; border: 0; background: transparent; padding: 4px 0; min-height: 32px; font-size: 13px; font-weight: 600; color: var(--mlap-accent); cursor: pointer; font-variant-numeric: tabular-nums; }
  .dhp-txr .dhp-amt b.struck { text-decoration: line-through; color: var(--mlap-sub); }
  .dhp-tags { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; margin-top: 3px; }
  .dhp-tag.neg { background: var(--mlap-neg-soft); color: var(--mlap-neg); }
  .dhp-tag:not(.bon):not(.l):not(.p):not(.w):not(.ok):not(.neg) { background: var(--mlap-bg); color: var(--mlap-sub); }
  .dhp-chip.x .dhp-chip-in { border: 0; background: transparent; color: inherit; font: inherit; padding: 0; min-height: 30px; display: inline-flex; align-items: center; cursor: pointer; }
  .dhp-undo { display: flex; align-items: center; gap: 12px; }
  .dhp-undo button { border: 0; background: transparent; color: inherit; font-weight: 700; min-height: 32px; cursor: pointer; text-decoration: underline; }
}

/* Cetak daftar (⋯ Cetak): only the rows print */
@media print {
  body.dhp-txprint * { visibility: hidden !important; }
  body.dhp-txprint .dhp-txprint-area, body.dhp-txprint .dhp-txprint-area * { visibility: visible !important; }
  body.dhp-txprint .dhp-root { position: static !important; overflow: visible !important; }
  body.dhp-txprint .dhp-txprint-area { position: absolute; left: 0; top: 0; width: 100%; }
}