.mock-bar { margin: 0; padding: 8px 20px; background: var(--warn-soft); color: #6b3a04; font-size: .8125rem; line-height: 1.5; text-align: center; }
.step { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.step::-webkit-scrollbar { display: none; }
.step a { padding: 10px 12px; color: var(--ink-2); text-decoration: none; font-size: .9rem; white-space: nowrap; border-bottom: 2px solid transparent; }
.step a:hover { color: var(--ink); }
.step a[aria-current="page"] { color: var(--ink); font-weight: 600; border-bottom-color: var(--accent); }
.step a.mati { opacity: .45; pointer-events: none; }
.page { padding-top: 24px; padding-bottom: 48px; }
h3 { margin: 0 0 8px; font-size: 1rem; line-height: 1.4; }
.mt { margin-top: 12px; }
.linkbtn { font: inherit; background: none; border: 0; padding: 0; color: var(--accent); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.antri-1 { margin-top: 20px; padding: 16px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); }
.antri-1 p { margin: 0; }

.dua { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }
.dua .pv { max-height: none; }
.dua .bubble { max-width: 85%; }
.bubble a { color: #027eb5; overflow-wrap: anywhere; }
.bubble .n { color: #4d5c50; }

.lap-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--card); }
.seg button { font: inherit; font-size: .9rem; border: 0; background: none; padding: 8px 14px; min-height: 40px; cursor: pointer; color: var(--ink-2); }
.seg button + button { border-left: 1px solid var(--line); }
.seg button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); font-weight: 600; }
.seg b { font-weight: 650; margin-left: 4px; }
.lap-head .btn { min-height: 40px; }
#lap-ket { margin: 12px 0; line-height: 1.5; }
.filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.filter input, .filter select { font: inherit; font-size: .9rem; padding: 8px 10px; min-height: 40px; border: 1px solid var(--line); border-radius: var(--r); background: #fff; color: var(--ink); min-width: 0; }
.filter input[type="search"] { flex: 1 1 220px; }
.tbl-wrap { overflow-x: auto; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); }
.tbl { width: 100%; border-collapse: collapse; font-size: .875rem; line-height: 1.4; }
.tbl th, .tbl td { padding: 7px 10px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.tbl th { background: #f5f7f8; font-size: .8125rem; color: var(--ink-2); font-weight: 600; white-space: nowrap; }
.tbl td.n, .tbl th.n { text-align: right; white-space: nowrap; width: 1%; }
.tbl td:first-child { min-width: 14em; }
.tbl td.ambil { font-weight: 700; color: var(--accent); }
.tbl .kurang { display: block; color: var(--warn); font-size: .75rem; font-weight: 600; }
.tbl tr.grp td { background: var(--accent); color: var(--accent-ink); font-weight: 650; }
.tbl tr.kat td { background: var(--accent-soft); color: var(--accent); font-weight: 600; font-size: .8125rem; }

/* Tugas sopir: 1 baris per gudang, item di dialog */
.gd-rows { list-style: none; margin: 0; padding: 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); }
.gd-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 16px; padding: 12px 14px; }
.gd-row + .gd-row { border-top: 1px solid var(--line); }
.gd-info { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.gd-info h3 { margin: 0; min-width: 5.5em; }
.gd-info .meta { color: var(--ink-2); font-size: .875rem; }
.gd-ctl { display: flex; gap: 8px; align-items: center; }
.gd-ctl select { font: inherit; font-size: .9rem; padding: 6px 10px; min-height: 40px; border: 1px solid var(--line); border-radius: var(--r); background: #fff; width: 11rem; }
.gd-ctl .btn { min-height: 40px; }
.gd-st { grid-column: 1 / -1; margin: 0; font-size: .8125rem; color: var(--accent); font-weight: 600; }
.gd-st:empty { display: none; }
.drv { margin-top: 20px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px; }
.drv summary { cursor: pointer; font-weight: 600; }
.drv ul { padding-left: 20px; line-height: 1.8; }

dialog { border: 0; padding: 0; border-radius: var(--r); width: min(640px, 100vw - 24px); max-height: calc(100dvh - 24px); box-shadow: 0 8px 32px rgba(0,0,0,.25); }
dialog::backdrop { background: rgba(24,33,42,.5); }
.dlg-in { display: flex; flex-direction: column; max-height: calc(100dvh - 24px); }
.dlg-top { display: flex; justify-content: space-between; align-items: start; gap: 12px; padding: 14px 16px 10px; }
.dlg-top h2 { margin: 0; }
#dlg-cari { font: inherit; margin: 0 16px 8px; padding: 8px 10px; min-height: 40px; border: 1px solid var(--line); border-radius: var(--r); }
#dlg-ul { list-style: none; margin: 0; padding: 0; overflow: auto; flex: 1; border-top: 1px solid var(--line); }
#dlg-ul li { display: grid; grid-template-columns: minmax(0, 1fr) 4rem auto; gap: 10px; align-items: center; padding: 8px 16px; border-bottom: 1px solid #eef1f3; font-size: .875rem; line-height: 1.4; }
#dlg-ul .nm small { display: block; color: var(--ink-2); font-size: .75rem; }
#dlg-ul li.off .nm { text-decoration: line-through; color: var(--ink-2); }
#dlg-ul input { width: 100%; min-height: 40px; font: inherit; padding: 4px 6px; border: 1px solid var(--line); border-radius: 4px; text-align: right; }
#dlg-ul input:disabled { opacity: .5; }
#dlg-ul .x { font: inherit; font-size: .8125rem; min-height: 40px; border: 1px solid var(--line); background: #fff; color: var(--err); cursor: pointer; padding: 4px 10px; border-radius: 4px; }
#dlg-ul li.off .x { color: var(--accent); }
.dlg-bot { display: flex; justify-content: flex-end; padding: 12px 16px; border-top: 1px solid var(--line); }

@media (max-width: 640px) {
  .gd-row { grid-template-columns: 1fr; }
  .gd-ctl { display: grid; grid-template-columns: auto 1fr auto; }
  .gd-ctl select { width: 100%; }
  .tbl td:first-child { min-width: 9em; }
  .tbl .fms { display: none; }
  .seg button { padding: 8px 10px; font-size: .8125rem; }
}
@media print {
  .mock-bar, .top, .no-print, .seg { display: none !important; }
  body { background: #fff; font-size: 11px; }
  .tbl-wrap { overflow: visible; border: 0; }
  .tbl tr.grp td, .tbl tr.kat td { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  #lap-ket { font-size: 12px; font-weight: 600; color: #000; }
}
.cd { font-variant-numeric: tabular-nums; }
.gd-ctl .btn:last-child { min-width: 7.5rem; }
.gd-ctl .btn:disabled { background: #e3e7ea; border-color: #e3e7ea; color: #5f6b76; opacity: 1; cursor: not-allowed; }
#dlg-ul input { width: 4rem; }
#dlg-ul .nm small { color: #4a5560; }
@media (max-width: 640px) {
  dialog { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; }
  .dlg-in { height: 100dvh; max-height: 100dvh; }
  #dlg-ul li { padding: 8px 12px; gap: 8px; }
}
@media (max-width: 640px) {
  .gd-ctl { grid-template-columns: 1fr 1fr; }
  .gd-ctl select { grid-column: 1 / -1; order: -1; }
}