/* GMP Stok & Harga — gaya aplikasi (sama dengan rancangan di canvas) */
@font-face { font-family: "Carlito"; src: url(/fonts/carlito-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Carlito"; src: url(/fonts/carlito-700.woff2) format("woff2"); font-weight: 600 800; font-display: swap; }
@font-face { font-family: "PJS"; src: url(/fonts/pjs-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "PJS"; src: url(/fonts/pjs-500.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "PJS"; src: url(/fonts/pjs-600.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "PJS"; src: url(/fonts/pjs-700.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "PJS"; src: url(/fonts/pjs-800.woff2) format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "PlexMono"; src: url(/fonts/plexmono-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "PlexMono"; src: url(/fonts/plexmono-600.woff2) format("woff2"); font-weight: 600; font-display: swap; }

:root {
  --must-bg: #fff8dc; --must-line: #e3bd52;
  --bg: #f3f4f2; --surface: #fff; --surface-2: #eceeeb; --line: #d3d7d2; --line-2: #c9cdc8;
  --ink: #202327; --ink-2: #4f545b; --ink-3: #80858c; --dark: #202327; --dark-2: #3a3f46;
  --blue: #2a63d4; --blue-bg: #e3ecfd; --blue-ink: #1d4aa3;
  --violet: #7448d0; --violet-bg: #eee7fb; --violet-ink: #5a35a8;
  --amber: #b25f00; --amber-bg: #fdefd9; --amber-ink: #8a4a00; --amber-line: #f0c27a;
  --green: #2a7f39; --green-bg: #e0f2e2; --green-ink: #1f6a2c;
  --teal: #0a7f84; --teal-bg: #daf1f1; --teal-ink: #0a6b6f;
  --red: #c0302a; --red-bg: #fbe5e3; --red-ink: #9b241f;
  --changed: #efe8fb; --changed-line: #b9a2ea; --override: #e6effd; --override-line: #9fbbef;
  /* Calibri (bawaan Windows/Office); Carlito = pengganti Calibri dengan ukuran huruf sama, untuk HP/Mac */
  --f-ui: Calibri, "Carlito", "Segoe UI", system-ui, sans-serif;
  --f-mono: Calibri, "Carlito", "Segoe UI", system-ui, sans-serif;
  --r: 8px;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--f-ui); font-size: 14.5px; line-height: 1.4; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--blue); } a:hover { color: var(--blue-ink); }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
[hidden] { display: none !important; }
.mono { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
.num { text-align: right; font-family: var(--f-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.muted { color: var(--ink-3); } .sub { font-size: 12px; color: var(--ink-2); }
.boot { padding: 40px; color: var(--ink-3); }

/* layout */
.top { position: sticky; top: 0; z-index: 30; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 10px 20px; background: var(--dark); color: #fff; padding-top: calc(10px + env(safe-area-inset-top)); }
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1 1 220px; }
.brand img { width: 30px; height: 30px; }
.brand .eyebrow { font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: #b9bec5; }
.brand h1 { margin: 0; font-size: 16px; font-weight: 800; }
.nav { display: flex; flex-wrap: wrap; gap: 2px; }
.nav a { color: #b9bec5; text-decoration: none; padding: 7px 11px; border-radius: 6px; font-weight: 600; }
.nav a.on { color: #fff; background: var(--dark-2); }
.nav a:hover { color: #fff; }
.who { display: flex; align-items: center; gap: 8px; }
.avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--violet); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px; flex: none; }
.avatar.sm { width: 20px; height: 20px; font-size: 10px; }
.iconbtn { position: relative; width: 38px; height: 38px; border-radius: 8px; border: 1px solid #4a5058; background: transparent; color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.badge-dot { position: absolute; top: -5px; right: -5px; background: var(--red); color: #fff; font-size: 10px; font-weight: 700; border-radius: 999px; padding: 1px 6px; }
main.page { padding: 16px 20px 60px; max-width: 1680px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.grow { flex: 1 1 auto; min-width: 0; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 14px; }
.section-h { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
h2.title { margin: 0; font-size: 18px; font-weight: 800; }

/* controls */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid var(--line-2); background: var(--surface); border-radius: 6px; padding: 0 12px; min-height: 36px; font-weight: 600; cursor: pointer; white-space: nowrap; text-decoration: none; color: var(--ink); }
.btn:hover { border-color: var(--ink-3); }
.btn.primary { background: var(--dark); color: #fff; border-color: var(--dark); }
.btn.primary:hover { opacity: .9; }
.btn.danger { color: var(--red-ink); }
.btn.sm { min-height: 28px; padding: 0 8px; font-size: 12px; }
.btn.ghost { background: transparent; border-color: transparent; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.input, select.input, textarea.input { border: 1px solid var(--line-2); background: #fff; border-radius: 6px; padding: 7px 10px; min-height: 36px; width: 100%; }
textarea.input { min-height: 64px; resize: vertical; }
label.f { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: var(--ink-2); min-width: 0; }
.req { color: var(--red); }
.seg { display: inline-flex; border: 1px solid var(--line-2); border-radius: 6px; overflow: hidden; background: #fff; }
.seg button { border: 0; background: transparent; padding: 0 12px; min-height: 34px; font-weight: 600; cursor: pointer; }
.seg button + button { border-left: 1px solid var(--line-2); }
.seg button.on { background: var(--dark); color: #fff; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { border: 1px solid var(--line-2); background: #fff; border-radius: 999px; padding: 0 12px; min-height: 32px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.chip.on { background: var(--dark); color: #fff; border-color: var(--dark); }
.chip .n { font-family: var(--f-mono); font-size: 12px; opacity: .7; }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 10px; }
.toolbar .search { flex: 1 1 280px; }

/* pills & tags */
.pill { display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; padding: 2px 9px; font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.st-baru { color: var(--blue-ink); background: var(--blue-bg); }
.st-dicek { color: var(--violet-ink); background: #f0eafc; }
.st-vendor { color: var(--violet-ink); background: var(--violet-bg); }
.st-konf { color: var(--amber-ink); background: var(--amber-bg); }
.st-dijawab { color: var(--green-ink); background: var(--green-bg); }
.st-kirim { color: var(--teal-ink); background: var(--teal-bg); }
.st-tidak, .st-batal { color: var(--ink-2); background: #ebecee; }
.st-open { color: var(--blue-ink); background: var(--blue-bg); }
.st-partial { color: var(--violet-ink); background: var(--violet-bg); }
.st-answered { color: var(--green-ink); background: var(--green-bg); }
.st-sent { color: var(--teal-ink); background: var(--teal-bg); }
.st-cancelled { color: var(--ink-2); background: #ebecee; }
.tag { display: inline-block; border-radius: 4px; padding: 1px 6px; font-size: 11px; font-weight: 700; letter-spacing: .02em; white-space: nowrap; }
.tag.red { color: var(--red-ink); background: var(--red-bg); } .tag.amber { color: var(--amber-ink); background: var(--amber-bg); }
.tag.green { color: var(--green-ink); background: var(--green-bg); } .tag.gray { color: var(--ink-2); background: #ebecee; }
.age { font-family: var(--f-mono); font-weight: 700; font-size: 11px; border-radius: 4px; padding: 2px 6px; white-space: nowrap; }
.age.green { background: var(--green-bg); color: var(--green-ink); } .age.yellow { background: var(--amber-bg); color: var(--amber-ink); } .age.red { background: var(--red-bg); color: var(--red-ink); }
.rail-green { box-shadow: inset 4px 0 0 var(--green); } .rail-yellow { box-shadow: inset 4px 0 0 #d98a00; } .rail-red { box-shadow: inset 4px 0 0 var(--red); }

/* banners */
.banner { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; border-radius: var(--r); padding: 10px 14px; border: 1px solid var(--line); background: #fff; }
.banner.amber { background: #fdf3e2; border-color: var(--amber-line); color: #6b3a00; }
.banner.violet { background: #f3eefc; border-color: var(--changed-line); color: #4a2b8f; }
.banner.red { background: var(--red-bg); border-color: #efb3ad; color: var(--red-ink); }
.banner.blue { background: #eef1f8; border-color: #c8d4ee; color: #1d3a7a; }
.banner.green { background: var(--green-bg); border-color: #b5dcbb; color: var(--green-ink); }
.pw-wrap { position: relative; display: block; }
.pw-wrap .input { padding-right: 42px; }
.pw-eye { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); width: 36px; height: 32px; display: flex; align-items: center; justify-content: center; border: 0; background: transparent; color: var(--ink-2); cursor: pointer; border-radius: 6px; }
.pw-eye:hover { background: #ebecee; }
.input.invalid { border-color: var(--red); }
.f-err { font-size: 12px; font-weight: 500; color: var(--red-ink); }

/* tables */
.tablewrap { background: #fff; border: 1px solid var(--line); border-radius: var(--r); overflow: auto; max-height: calc(100vh - 230px); }
table.t { border-collapse: separate; border-spacing: 0; width: 100%; }
table.t th { position: sticky; top: 0; z-index: 2; background: var(--surface-2); font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-2); text-align: left; padding: 8px; border-bottom: 1px solid var(--line); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
table.t th .rs { position: absolute; top: 0; right: 0; bottom: 0; width: 7px; cursor: col-resize; border-right: 2px solid var(--line-2); opacity: .6; }
table.t th .rs:hover { opacity: 1; border-right-color: var(--blue); }
table.t td { padding: 6px 8px; border-bottom: 1px solid #e3e6e2; vertical-align: middle; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
table.t tr.click { cursor: pointer; } table.t tr.click:hover td { background: #f7f8f6; }
table.t tr.group td { background: #eef1f8; white-space: normal; }
table.t tr.brand td { background: var(--dark); color: #fff; font-weight: 800; }
table.t tr.sel td { background: #fffaf0; }
table.t tr.locked td { color: var(--ink-3); }
table.t td.calc { background: #f6f7f5; }
table.t td.warn { background: var(--red-bg); color: var(--red-ink); font-weight: 700; }
table.t td.changed { background: var(--changed); box-shadow: inset 0 0 0 1px var(--changed-line); }
table.t td.override { background: var(--override); box-shadow: inset 0 0 0 1px var(--override-line); }
table.t td.cell-edit { padding: 2px 4px; }
.cellin { width: 100%; min-width: 50px; border: 1px solid var(--line-2); border-radius: 4px; padding: 4px 6px; background: #fff; font-family: inherit; }
.cellin.num { text-align: right; font-family: var(--f-mono); }
.cellin:focus { border-color: var(--blue); outline: none; box-shadow: 0 0 0 2px #2a63d433; }
td.focus-cell { box-shadow: inset 0 0 0 2px var(--blue); }

/* board */
.board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 1fr); gap: 12px; overflow-x: auto; align-items: start; padding-bottom: 6px; }
.col { background: var(--surface-2); border-radius: 10px; padding: 10px; display: flex; flex-direction: column; gap: 8px; min-height: 120px; }
.col.auto { background: #f0eeea; outline: 2px dashed #d3c4a8; outline-offset: -2px; }
.col.over { outline: 2px dashed var(--blue); outline-offset: -2px; }
.col.blocked { opacity: .45; }
.col-h { display: flex; justify-content: space-between; align-items: baseline; padding: 2px 4px; font-weight: 800; }
.col-h .n { font-size: 12px; color: var(--ink-2); font-family: var(--f-mono); font-weight: 400; }
.kcard { background: #fff; border: 1px solid var(--line); border-left-width: 4px; border-radius: 8px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; cursor: pointer; text-align: left; }
.kcard.green { border-left-color: var(--green); } .kcard.yellow { border-left-color: #d98a00; } .kcard.red { border-left-color: var(--red); }
.kcard[draggable=true] { cursor: grab; }
.bar { flex: 1; display: flex; height: 8px; border-radius: 4px; overflow: hidden; background: #e3e6e2; }
.bar span { display: block; height: 8px; }
.bg-baru { background: var(--blue); } .bg-dicek { background: var(--violet); } .bg-vendor { background: var(--violet-ink); } .bg-konf { background: var(--amber); } .bg-dijawab { background: var(--green); } .bg-kirim { background: var(--teal); } .bg-tidak { background: var(--ink-3); }

/* modal */
.scrim { position: fixed; inset: 0; z-index: 60; background: rgba(20,22,26,.45); display: flex; align-items: flex-start; justify-content: center; padding: 6vh 16px 16px; overflow-y: auto; }
.modal { background: #fff; border-radius: 12px; box-shadow: 0 16px 40px rgba(20,22,26,.25); width: min(780px, 100%); padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.modal.wide { width: min(1100px, 100%); }
.modal-h { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.modal-h h3 { margin: 0; font-size: 15px; font-weight: 800; }
.toast { position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 90; background: var(--dark); color: #fff; padding: 10px 16px; border-radius: 999px; font-weight: 600; box-shadow: 0 8px 24px rgba(0,0,0,.2); max-width: calc(100% - 32px); }
.toast.err { background: var(--red-ink); }
/* tooltip ala Windows (installTooltips di ui.js) */
.wtip { position: fixed; z-index: 200; max-width: 300px; padding: 5px 9px; background: #fffef2; color: #1f2328; border: 1px solid #8c8c8c; border-radius: 3px; box-shadow: 2px 2px 6px rgba(0,0,0,.18); font-size: 12.5px; font-weight: 400; line-height: 1.4; white-space: pre-line; pointer-events: none; }

/* history & photos */
.lightbox { position: relative; height: 340px; border-radius: 8px; background: #2b2f34; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.lightbox img { max-width: 100%; max-height: 100%; }
.lightbox .nav-l, .lightbox .nav-r { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(255,255,255,.9); cursor: pointer; font-size: 18px; }
.lightbox .nav-l { left: 8px; } .lightbox .nav-r { right: 8px; }
.thumbs { display: flex; flex-wrap: wrap; gap: 8px; }
.thumbs img, .thumbs .pdf { width: 64px; height: 64px; object-fit: cover; border-radius: 6px; border: 2px solid transparent; cursor: pointer; background: #e3e6e2; }
.thumbs .on { border-color: var(--blue); }
.thumbs .pdf { display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; }
.watermark { position: fixed; inset: 0; pointer-events: none; z-index: 5; background-repeat: repeat; opacity: .05; }

/* auth */
.authwrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px; }
.authcard { width: min(400px, 100%); background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 24px; display: flex; flex-direction: column; gap: 14px; }
.authcard h1 { margin: 0; font-size: 20px; font-weight: 800; }
.qr { display: flex; justify-content: center; } .qr img { width: 200px; height: 200px; image-rendering: pixelated; }

@media (max-width: 760px) {
  .top { padding: 8px 12px; } main.page { padding: 12px 12px 80px; }
  .nav { order: 3; width: 100%; overflow-x: auto; flex-wrap: nowrap; }
  .hide-m { display: none !important; }
  .tablewrap { max-height: none; }
  .board { grid-auto-columns: 82%; }
}
@media (prefers-reduced-motion: no-preference) { .modal { animation: pop .14s ease-out; } @keyframes pop { from { transform: translateY(8px); opacity: .6; } } }
.input.override { background: var(--override); border-color: var(--override-line); }
.input.editable { background: #fffbe8; border-color: #e8d98a; }
.input.editable:focus { background: #fff; }
.tabs-v { display:flex; flex-wrap:wrap; gap:6px; }
table.t.compact td, table.t.compact th { padding: 4px 6px; }
table.t td input.input { padding: 4px 6px; min-height: 0; }
label.f .req { display: inline; }
.only-m { display: none; }
@media (max-width: 760px) {
  .only-m { display: flex; }
  .mline { display: flex; flex-direction: column; gap: 6px; background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--line); border-radius: var(--r); padding: 10px 12px; }
  .mline.green { border-left-color: var(--green); } .mline.yellow { border-left-color: #d98a00; } .mline.red { border-left-color: var(--red); }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .kpis .card { padding: 8px 10px; } .kpis .mono { font-size: 15px !important; }
}
a.chip { text-decoration: none; color: inherit; }
/* Cek Stok & Harga: blok stok & harga dipisah jelas */
table.cat-t th, table.cat-t td { border-right: 1px solid var(--line); }
table.cat-t th { text-align: center !important; vertical-align: middle; }
table.cat-t tr.grp-h th { text-align: center; font-size: 11px; letter-spacing: .04em; }
table.cat-t th.c-stock-h { background: #e6eef8; color: #1d3a7a; border-left: 2px solid #8aa3cf; border-right: 2px solid #8aa3cf; }
table.cat-t th.c-price-h { background: #f3efe6; color: #6b4a00; }
table.cat-t th.c-stock { background: #eef3fa; }
table.cat-t td.c-stock { background: #f6f9fd; min-width: 54px; }
table.cat-t td.c-stock.has { background: #e9f2e9; font-weight: 700; color: var(--green-ink); }
table.cat-t .c-stock.c-first { border-left: 2px solid #8aa3cf; }
table.cat-t .c-total { border-left: 2px solid #8aa3cf; font-weight: 800; min-width: 64px; }
table.cat-t td.c-total.pos { background: #dcefdc; color: var(--green-ink); }
table.cat-t td.c-total.zero { background: #fbe9e7; color: var(--red-ink); }
table.cat-t tbody tr:nth-child(even) td.c-item { background: #fafaf8; }
table.cat-t tbody tr:hover td { filter: brightness(0.97); }
table.cat-t .c-instock { border-right: 2px solid #8aa3cf !important; font-weight: 700; min-width: 70px; background: #eef3fa; }
.card.sapdiff { background: var(--override); border-color: var(--override-line); }

/* ===== HP: menu, tabel jadi kartu, modal penuh ===== */
@media (max-width: 760px) {
  .top { gap: 8px 10px; padding: 8px 12px; padding-top: calc(8px + env(safe-area-inset-top)); }
  .brand { flex: 1 1 auto; }
  .brand .eyebrow { display: none; }
  .nav { order: 3; width: 100%; display: flex; flex-wrap: wrap; gap: 6px; overflow: visible; }
  .nav a { white-space: nowrap; padding: 6px 12px; font-size: 13px; background: #2b3038; border-radius: 999px; color: #dfe2e6; }
  .nav a.on { background: #fff; color: var(--dark); }
  .input, select.input, textarea.input { font-size: 16px; }
  .title { font-size: 18px; }
  .row { flex-wrap: wrap; }
  .toolbar { padding: 8px; }
  .toolbar .search { flex: 1 1 100%; }
  .toolbar select.input { max-width: none !important; flex: 1 1 calc(50% - 8px); width: auto !important; }
  .chips { flex-wrap: wrap; gap: 6px; }
  .chips .chip { white-space: nowrap; }
  .scrim { padding: 0; align-items: stretch; }
  .modal, .modal.wide { width: 100%; min-height: 100%; border-radius: 0; padding: 12px; }
  .modal-h { position: sticky; top: -12px; background: #fff; z-index: 3; padding: 8px 0; margin-top: -8px; }
  [role=listbox] { width: min(440px, 92vw) !important; }
  .board { grid-auto-columns: 88%; }

  /* tabel -> kartu (judul kolom ditulis di kiri setiap nilai) */
  .tablewrap { background: transparent; border: 0; overflow: visible; max-height: none; }
  table.t:not(.keep-m) thead { display: none; }
  table.t:not(.keep-m), table.t:not(.keep-m) tbody, table.t:not(.keep-m) tr { display: block; width: 100%; }
  table.t:not(.keep-m) tr { background: #fff; border: 1px solid var(--line); border-radius: 10px; margin: 0 0 8px; padding: 6px 12px; overflow: hidden; }
  table.t:not(.keep-m) tr:has(> td[colspan]) { padding: 0; }
  table.t:not(.keep-m) td { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 5px 0; border: 0; white-space: normal; overflow: visible; text-align: right; max-width: none !important; min-width: 0 !important; width: auto !important; }
  table.t:not(.keep-m) td + td { border-top: 1px dashed #eceeea; }
  table.t:not(.keep-m) td[data-label]:not([data-label=""])::before { content: attr(data-label); flex: 0 0 36%; text-align: left; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); }
  table.t:not(.keep-m) td[data-label=""] { justify-content: flex-end; flex-wrap: wrap; }
  table.t:not(.keep-m) td[colspan] { display: block; text-align: left; padding: 8px 12px; border-radius: 0; }
  table.t:not(.keep-m) td > div, table.t:not(.keep-m) td > span:not(.tag):not(.pill) { min-width: 0; }
  table.t:not(.keep-m) td > .input, table.t:not(.keep-m) td > select, table.t:not(.keep-m) td > input:not([type=checkbox]), table.t:not(.keep-m) td > div:has(> .input) { flex: 1 1 auto; min-width: 0; width: auto !important; }
  table.t:not(.keep-m) td .input { width: 100%; }
  table.t:not(.keep-m) td.calc, table.t:not(.keep-m) td.c-stock { background: transparent; }
}
@media (max-width: 760px) {
  table.t:not(.keep-m) { min-width: 0 !important; }
  table.t:not(.keep-m) td[data-label]:not([data-label=""])::before { font-family: "PJS", system-ui, sans-serif; }
  table.t:not(.keep-m) td > .cellin { flex: 1 1 auto; min-width: 0; width: auto !important; }
}
@media (max-width: 760px) { .cellin { font-size: 16px; padding: 6px 8px; } }
@media (max-width: 760px) {
  /* label di kiri (absolut), isi sel mengalir normal di kanan */
  table.t:not(.keep-m) td { display: block; position: relative; padding: 6px 0 6px 38%; text-align: right; }
  table.t:not(.keep-m) td[data-label=""], table.t:not(.keep-m) td:not([data-label]) { padding-left: 0; }
  table.t:not(.keep-m) td[data-label]:not([data-label=""])::before { position: absolute; left: 0; top: 7px; width: 35%; }
  table.t:not(.keep-m) td[data-label=""] > * { margin-left: 4px; }
  table.t:not(.keep-m) td[colspan] { padding: 8px 12px; }
  table.t:not(.keep-m) td > .input, table.t:not(.keep-m) td > select, table.t:not(.keep-m) td > .cellin, table.t:not(.keep-m) td > input:not([type=checkbox]) { width: 100% !important; }
  table.t:not(.keep-m) td .row { justify-content: flex-end; }
}
@media (max-width: 760px) {
  table.t:not(.keep-m) td { min-height: 30px; }
  table.t:not(.keep-m) td.cell-edit[data-label]:not([data-label=""]) { padding: 4px 0 4px 38%; }
}
table.cat-t th.sortable { cursor: pointer; user-select: none; }
table.cat-t th.sortable:hover { text-decoration: underline; }
table.cat-t th.sorted { color: #0b3d91; background: #d7e3f6; }
@media (max-width: 760px) { .nr-hdr { grid-template-columns: 1fr !important; flex-basis: 100% !important; } }
@media (max-width: 760px) { .nr-submit { position: sticky; bottom: 0; background: var(--bg, #f3f3f1); padding: 10px 0 calc(10px + env(safe-area-inset-bottom)); z-index: 5; } .nr-submit .btn.primary { flex: 1 1 100%; } }

/* nilai yang diubah Sales setelah dokumen dikirim (permanen) */
.salesch, table.t td.salesch { background: #ffe8cc !important; box-shadow: inset 0 0 0 1px #f0a35a; }
span.salesch { padding: 0 4px; border-radius: 4px; }
/* filter user di Antrian: ikon yang bisa dipilih bersamaan */
.uchip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 3px; border-radius: 999px; border: 1px solid var(--line-2); background: #fff; cursor: pointer; font: inherit; font-size: 12.5px; color: var(--ink-3); opacity: .55; }
.uchip .ava { width: 24px; height: 24px; border-radius: 50%; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 12px; filter: grayscale(1); }
.uchip.on { opacity: 1; color: var(--ink); border-color: var(--ink); font-weight: 700; box-shadow: 0 0 0 1px var(--ink) inset; }
.uchip.on .ava { filter: none; }
/* baris alternatif: menjorok ke dalam di bawah baris aslinya */
table.t tr.alt-row td { background: #f5f8ff; }
table.t tr.alt-row td:nth-child(2) { padding-left: 34px; position: relative; }
table.t tr.alt-row td:nth-child(2)::after { content: "↳"; position: absolute; left: 12px; top: 8px; color: #6b84c4; font-weight: 800; }
.mline.alt-line { margin-left: 22px; border-left-color: #6b84c4 !important; background: #f5f8ff; }
@media (max-width: 760px) { table.t tr.alt-row { margin-left: 18px; } }
table.vend-t td { padding: 3px 4px; } table.vend-t .cellin { min-width: 56px; }
table.vend-t .cellin { min-width: 0; width: 100%; } table.vend-t th { font-size: 10px; padding: 6px 4px; }
@media (max-width: 760px) { table.vend-t { min-width: 0 !important; table-layout: auto !important; } }
table.vend-t th { white-space: normal; line-height: 1.15; overflow: visible; text-overflow: clip; }
table.cat-t td.c-code { white-space: nowrap; min-width: 92px; vertical-align: top; }
.scanbtn { white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; }
#scan-reader video { width: 100% !important; }
.pick-list { position: fixed; z-index: 60; width: max-content; max-width: min(460px, 92vw); max-height: 320px; overflow: auto; background: #fff; border: 1px solid var(--line-2); border-radius: 8px; box-shadow: 0 8px 24px rgba(20,22,26,.16); padding: 4px; text-align: left; white-space: normal; }
.pick-opt { padding: 6px 8px; border-radius: 6px; cursor: pointer; }
.pick-opt.on, .pick-opt:hover { background: #eef3fb; }
table.po-t td.c-vendor { min-width: 190px; }
td.stockcell { white-space: normal; min-width: 160px; }
td.stockcell .sub { font-family: var(--f-ui); line-height: 1.3; }
@media (min-width: 761px) and (max-width: 1500px) { .nav a { padding: 7px 7px; font-size: 13px; } .brand { flex: 1 1 140px; } .top { gap: 10px 10px; } }
/* Antrian Purchasing: tabel pas selebar layar (tanpa geser ke samping), teks turun ke bawah */
@media (min-width: 761px) {
  table.q-flat { table-layout: fixed; width: 100%; min-width: 1100px; }
  table.q-flat th { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.2; padding: 6px 4px; font-size: 10px; letter-spacing: .02em; vertical-align: bottom; }
  table.q-flat td { white-space: normal; overflow-wrap: break-word; padding: 5px 4px; font-size: 12px; line-height: 1.35; vertical-align: top; }
  table.q-flat td.num { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; }
  table.q-flat td .pill, table.q-flat td .age { white-space: nowrap; }
  table.q-flat td .tag, table.q-flat td b { white-space: normal; }
  table.q-flat td.q-act { overflow: visible; }
  table.q-flat td.q-act .btn, table.q-flat td .btn.sm { padding: 3px 6px; font-size: 11.5px; margin: 0 0 3px 0; }
  table.q-flat tr.grp td { vertical-align: middle; }
}
@media (min-width: 761px) {
  table.q-flat td.q-doc a { font-size: 11.5px; white-space: nowrap; }
  table.q-flat td.q-doc { overflow: hidden; text-overflow: ellipsis; }
  table.q-flat td.mono { font-size: 12px; }
  table.q-flat td b[style] { white-space: normal !important; display: inline-block; line-height: 1.25; }
  table.q-flat td.q-act { display: table-cell; }
  table.q-flat td.q-act > .btn, table.q-flat td.q-act > span, table.q-flat td.q-act > span > .btn { display: block !important; width: 100%; text-align: center; }
  table.q-flat td.q-act [role=menu] .btn { display: flex !important; text-align: left; }
  table.q-flat th { overflow-wrap: normal; word-break: normal; }
}
@media (min-width: 761px) {
  table.q-flat td.q-nw { white-space: nowrap; }
  table.q-flat td .age { font-size: 11px; padding: 1px 4px; }
  table.q-flat td .pill { font-size: 11px; padding: 1px 6px; }
  table.q-flat td:nth-last-child(2) .btn { padding: 3px 5px; }
  table.q-flat td, table.q-flat th { padding-left: 3px; padding-right: 3px; }
}
@media (min-width: 761px) and (max-width: 1500px) {
  table.q-flat td, table.q-flat td.num, table.q-flat td.mono { font-size: 11px; }
  table.q-flat td.q-doc a { font-size: 10.5px; }
  table.q-flat td .age, table.q-flat td .pill { font-size: 10px; padding: 1px 3px; }
  table.q-flat th { font-size: 9.5px; }
}
/* menu Assign: posisi tetap, teks jelas */
.assign-menu { position: fixed; z-index: 80; min-width: 210px; overflow-y: auto; overscroll-behavior: contain; background: #fff; border: 1px solid var(--line-2); border-radius: 8px; box-shadow: 0 10px 28px rgba(20,22,26,.22); padding: 4px; text-align: left; }
.assign-menu .assign-h { font-size: 11px; font-weight: 700; color: var(--ink-2); padding: 6px 10px 4px; text-transform: uppercase; letter-spacing: .04em; }
.assign-menu button { display: block; width: 100%; text-align: left; background: none; border: 0; border-radius: 6px; padding: 8px 10px; font: inherit; font-size: 13px; color: var(--ink); cursor: pointer; white-space: nowrap; }
.assign-menu button span { color: var(--ink-3); font-size: 12px; }
.assign-menu button:hover { background: #eef3fb; }
.assign-menu button.cancel { color: var(--ink-3); border-top: 1px solid var(--line); border-radius: 0 0 6px 6px; margin-top: 2px; }
/* tombol Riwayat kecil (link) */
button.q-hist { display: block; margin: 3px auto 0; background: none; border: 0; padding: 0; font: inherit; font-size: 11px; color: var(--ink-3); text-decoration: underline; cursor: pointer; }
button.q-hist:hover { color: var(--blue, #0b3d91); }
/* Antrian Purchasing: huruf lebih kecil */
@media (min-width: 761px) {
  table.q-flat td, table.q-flat td.num, table.q-flat td.mono { font-size: 11px; }
  table.q-flat td.q-doc a { font-size: 10.5px; }
  table.q-flat th { font-size: 9.5px; }
  table.q-flat td .age, table.q-flat td .pill { font-size: 10px; padding: 1px 4px; }
  table.q-flat td.q-act .btn { font-size: 11px; padding: 3px 4px; }
}
table.q-flat td.q-tab { font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
table.q-flat td.q-tab { padding-left: 2px; padding-right: 2px; }

/* garis kolom lebih tegas di semua tabel */
table.t th { border-bottom: 2px solid #b9bfb7; border-right: 1px solid #d3d8d1; }
table.t td { border-bottom: 1px solid #cfd4cd; border-right: 1px solid #e0e4de; }
table.t th:last-child, table.t td:last-child { border-right: 0; }
table.t tbody tr:hover td { background-color: #f6f8f4; }
@media (min-width: 761px) {
  table.q-flat td, table.q-flat td.num, table.q-flat td.mono { font-size: 12.5px; }
  table.q-flat td.q-doc a { font-size: 12px; }
  table.q-flat th { font-size: 10.5px; }
  table.q-flat td .age, table.q-flat td .pill { font-size: 11px; }
}

/* ===== Tabel: jarak kolom seragam di semua modul ===== */
table.t th, table.t td { padding: 5px 7px; }
table.t.compact th, table.t.compact td { padding: 4px 6px; }
.num, td.num { font-variant-numeric: tabular-nums lining-nums; }
table.t th { color: #2f3439; background: #e9ece6; }

/* ===== Antrian Purchasing: lebar kolom mengikuti isi (tanpa ruang kosong), teks panjang turun ke bawah ===== */
@media (min-width: 761px) {
  table.q-flat { table-layout: auto; width: 100%; min-width: 0; }
  table.q-flat th, table.q-flat td { padding: 4px 6px; }
  table.q-flat th { white-space: nowrap; font-size: 11px; vertical-align: bottom; }
  table.q-flat td { white-space: nowrap; overflow: visible; text-overflow: clip; font-size: 13px; vertical-align: top; }
  table.q-flat td.num, table.q-flat td.mono, table.q-flat td.q-doc a { font-size: 13px; }
  table.q-flat td.q-wrap { white-space: normal; min-width: 90px; }
  table.q-flat td.q-desc { min-width: 170px; }
  table.q-flat td .age, table.q-flat td .pill { font-size: 12px; }
  table.q-flat td.q-doc { overflow: visible; }
}
button.q-link { background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; white-space: inherit; }
button.q-link:hover { color: var(--blue); text-decoration: underline; }
button.q-link.q-assign { text-decoration: underline dotted #8a929a; text-underline-offset: 3px; }
details.histpanel { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; background: #fafbf9; }
details.histpanel summary { cursor: pointer; }
details.histpanel[open] summary { margin-bottom: 8px; }
@media (min-width: 761px) {
  table.q-flat td.q-st { min-width: 80px; max-width: 150px; }
  table.q-flat td.q-st .sub { font-size: 11px; line-height: 1.25; }
  table.q-flat td.q-sm { min-width: 60px; }
  table.q-flat th { white-space: normal; }
}
@media (min-width: 761px) and (max-width: 1500px) {
  table.q-flat th, table.q-flat td { padding: 3px 4px; }
  table.q-flat td, table.q-flat td.num, table.q-flat td.mono, table.q-flat td.q-doc a { font-size: 12px; }
  table.q-flat td .age, table.q-flat td .pill { font-size: 11px; padding: 1px 4px; }
  table.q-flat td.q-desc { min-width: 120px; }
  table.q-flat td.q-wrap { min-width: 62px; }
  table.q-flat td.q-st { min-width: 70px; max-width: 100px; }
  table.q-flat td:nth-child(2) { white-space: normal; word-break: break-all; min-width: 60px; }
}
@media (min-width: 761px) and (max-width: 1500px) {
  table.q-flat td.q-sm { min-width: 44px; }
  table.q-flat td .btn.sm { padding: 2px 4px; }
}
@media (min-width: 761px) and (max-width: 1500px) { table.q-flat td.q-desc { min-width: 105px; } table.q-flat td.q-wrap { min-width: 56px; } }
@media (min-width: 761px) and (max-width: 1500px) {
  table.q-flat td.q-st { min-width: 64px; max-width: 86px; }
  table.q-flat td.q-st .pill { white-space: normal; line-height: 1.2; }
  table.q-flat td:last-child .btn.sm { padding: 2px 3px; gap: 2px; }
}
/* Cek Stok & Harga: ringkas supaya muat di layar */
table.cat-t td.c-item { min-width: 170px; }
@media (min-width: 761px) and (max-width: 1500px) {
  table.cat-t th, table.cat-t td { padding: 3px 4px; }
  table.cat-t td { font-size: 12px; }
  table.cat-t th { font-size: 10px; }
  table.cat-t td.c-item { min-width: 130px; }
  table.cat-t td.c-code { min-width: 70px; white-space: normal; word-break: break-all; }
  table.cat-t td.c-stock { min-width: 34px; }
  table.cat-t .c-total { min-width: 44px; }
  table.cat-t .c-instock { min-width: 50px; }
}
/* Log & KPI: muat selebar layar, teks turun ke bawah */
table.log-t th { white-space: normal; vertical-align: bottom; }
table.log-t td { overflow: visible; text-overflow: clip; vertical-align: top; }
table.log-t td.num { white-space: nowrap; }
/* Board per dokumen (kartu seperti Trello); warna kartu mengikuti umur */
.dboard { grid-auto-columns: minmax(210px, 1fr); }
.dcard { gap: 5px; border-left-width: 6px; transition: background .3s; }
.dcard.green { background: #f1f9f1; border-left-color: #2e8b3a; }
.dcard.amber { background: #fff6e0; border-left-color: #d98a00; }
.dcard.red { background: #fde9e7; border-left-color: #c0302a; }
.dcard.gray { background: #f3f4f2; border-left-color: #a6aca4; }
.dcard:hover { box-shadow: 0 4px 14px rgba(20,22,26,.14); }
.dc-title { display: flex; justify-content: space-between; align-items: flex-start; gap: 6px; font-weight: 700; font-size: 14px; line-height: 1.25; }
.dc-prog { height: 6px; background: rgba(0,0,0,.08); border-radius: 4px; overflow: hidden; }
.dc-prog.big { height: 8px; }
.dc-prog > span { display: block; height: 100%; background: #2e8b3a; }
.dc-age { font-weight: 700; }
.dcard.red .dc-age { color: #9b241f; } .dcard.amber .dc-age { color: #8a4a00; }
.dc-val { font-weight: 700; font-size: 14px; font-variant-numeric: tabular-nums; }
.dc-pics { display: flex; flex-wrap: wrap; gap: 4px; }
.dc-pic { font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 10px; background: #e3e7ee; color: #2f3439; }
/* Kartu dokumen gaya Trello */
.dcard { padding: 8px 10px; gap: 6px; border-left-width: 1px; border-color: #d9ddd6; box-shadow: 0 1px 1px rgba(20,22,26,.12); }
.dcard.green { background: #fff; } .dcard.amber { background: #fff7e3; } .dcard.red { background: #fdeceA; } .dcard.gray { background: #f3f4f2; }
.dc-labels { display: flex; gap: 4px; flex-wrap: wrap; }
.dc-label { min-width: 40px; height: 16px; border-radius: 4px; font-size: 10px; font-weight: 700; line-height: 16px; padding: 0 6px; color: #fff; background: #4bce97; letter-spacing: .03em; }
.dc-label.p-none { background: #4bce97; color: #164b35; } .dc-label.p-amber { background: #f5cd47; color: #533f04; } .dc-label.p-red-soft { background: #f87168; } .dc-label.p-red { background: #c9372c; } .dc-label.p-black { background: #5d1f1a; }
.dc-label.p-vendor { background: #9f8fef; }
.dc-title { font-weight: 700; font-size: 14px; line-height: 1.3; display: block; }
.dc-badges { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; font-size: 12px; color: #44546f; }
.dc-badge { display: inline-flex; align-items: center; gap: 3px; padding: 1px 5px; border-radius: 4px; white-space: nowrap; }
.dc-badge.age.green { background: #dcfff1; color: #216e4e; } .dc-badge.age.amber { background: #f8e6a0; color: #7f5f01; } .dc-badge.age.red { background: #c9372c; color: #fff; font-weight: 700; } .dc-badge.age.gray { background: #e6e8e4; color: #44546f; }
.dc-badge.done { background: #1f845a; color: #fff; }
.dc-foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 6px; }
.dc-pics { display: flex; gap: 2px; flex-wrap: wrap; justify-content: flex-end; }
.dc-pic { width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; background: #e2b203; color: #2b2b2b; padding: 0; }
/* label prioritas di kartu = warna prioritas yang sama dengan label lama */
.dc-label.p-none { background: #eceeea; color: #3a3f45; } .dc-label.p-amber { background: #fdf3e2; color: #6b3a00; border: 1px solid #f0c98a; }
.dc-label.p-red-soft { background: #fde8e6; color: #a3271b; } .dc-label.p-red { background: #d93025; color: #fff; } .dc-label.p-black { background: #5b0b05; color: #fff; }
/* Detail kartu dokumen (gaya Trello): kiri isi, kanan aktivitas */
.modal.wide:has(.dd-wrap) { max-width: min(1500px, 96vw); width: 96vw; }
.dd-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
.dd-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.dd-meta { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: flex-start; }
.dd-h { font-size: 11px; font-weight: 700; color: var(--ink-2); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px; }
.dd-desc { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; background: #fafbf9; min-height: 38px; white-space: pre-wrap; }
.dd-side { border-left: 1px solid var(--line); padding-left: 14px; max-height: 70vh; overflow: auto; }
.dd-acts { display: flex; flex-direction: column; gap: 10px; font-size: 13px; }
.dd-act { display: grid; grid-template-columns: 26px 1fr; gap: 8px; }
.dc-pic.big { width: 30px; height: 30px; font-size: 11px; }
.dc-label.big { height: auto; line-height: 1.6; font-size: 12px; padding: 2px 10px; display: inline-block; }
.dd-check { display: inline-flex; width: 16px; height: 16px; border: 1.5px solid #8a929a; border-radius: 3px; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; }
.dd-check.on { background: #1f845a; border-color: #1f845a; color: #fff; }
table.dd-t td { overflow: visible; vertical-align: top; }
@media (max-width: 900px) { .dd-wrap { grid-template-columns: 1fr; } .dd-side { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 10px; } }
/* sampul kartu (lampiran pertama) */
.dcard.has-cover { padding-top: 0; }
.dc-cover { margin: 0 -10px 2px; height: 130px; overflow: hidden; border-radius: 8px 8px 0 0; background: #e8ebe6; }
.dc-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dc-cover.pdf { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; height: 70px; background: #fbe9e7; color: #9b241f; }
.dc-cover.pdf span { font-weight: 800; font-size: 18px; } .dc-cover.pdf small { font-size: 11px; max-width: 90%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dd-files { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.dd-file { position: relative; width: 112px; border: 1px solid var(--line); border-radius: 8px; padding: 4px; background: #fff; cursor: grab; }
.dd-file.dragging { opacity: .4; } .dd-file.over { outline: 2px dashed var(--blue); }
.dd-file img, .dd-pdf { width: 100%; height: 80px; object-fit: cover; border-radius: 5px; display: block; }
.dd-pdf { display: flex; align-items: center; justify-content: center; background: #fbe9e7; color: #9b241f; font-weight: 800; }
.dd-fname { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 11px; margin-top: 2px; }
.dd-cover-tag { position: absolute; top: 6px; left: 6px; z-index: 1; background: #1f845a; color: #fff; font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 4px; }
.dd-fbtn { display: flex; justify-content: space-between; }
.dd-fbtn button { background: none; border: 0; cursor: pointer; font-size: 12px; color: var(--ink-2); padding: 0 6px; }
.dd-fbtn button:disabled { opacity: .25; cursor: default; }
/* bulatan inisial user */
.uchip-b { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px; padding: 0 6px; border-radius: 13px; border: 0; font: inherit; font-size: 10.5px; font-weight: 700; letter-spacing: .02em; cursor: pointer; line-height: 1; white-space: nowrap; vertical-align: middle; }
.uchip-b.sm { min-width: 22px; height: 22px; font-size: 9.5px; padding: 0 5px; }
.uchip-b.lg { min-width: 44px; height: 44px; border-radius: 22px; font-size: 14px; cursor: default; }
.uchip-b.ring { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #1d2125; }
.uchip-b:hover { filter: brightness(1.08); box-shadow: 0 0 0 2px rgba(0,0,0,.15); }
.upop { position: fixed; z-index: 120; width: 260px; display: flex; gap: 10px; align-items: center; background: #fff; border: 1px solid var(--line-2); border-radius: 10px; box-shadow: 0 10px 28px rgba(20,22,26,.22); padding: 10px 12px; }
.uchips { display: inline-flex; flex-wrap: wrap; gap: 3px; align-items: center; }

/* popup Cari barang (Tanya Harga baru) = tampilan Inventory + pilih banyak */
.isearch-scrim { padding: 3vh 16px; }
.modal.isearch { width: min(1600px, 97vw); height: 92vh; overflow: hidden; }
.isearch .toolbar { margin: 0; }
.isearch-body { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 8px; }
.isearch-body .tablewrap { max-height: none; overflow: visible; }
.isearch-body table.cat-t thead th { position: sticky; top: 0; z-index: 2; }
.isearch-body table.cat-t thead tr:nth-child(2) th { top: 27px; }
.isearch-f { display: flex; align-items: center; gap: 8px; border-top: 1px solid var(--line); padding-top: 10px; flex-wrap: wrap; }
.isearch-chips { display: flex; flex-wrap: wrap; gap: 4px; max-height: 64px; overflow: auto; }
table.cat-pick tbody tr { cursor: pointer; user-select: none; }
table.cat-pick tbody tr:hover td { background-color: #f1f5fc; }
table.cat-pick tbody tr.sel td { background-color: #dbe7ff !important; }
table.cat-pick tbody tr.cur td:first-child { box-shadow: inset 3px 0 0 #2f5bd3; }
table.cat-pick tbody tr.cur td { border-top: 1px solid #2f5bd3; border-bottom: 1px solid #2f5bd3; }
table.cat-t .c-chk { width: 30px; text-align: center !important; }
table.cat-t th.c-mine { background: #fff3c4 !important; }
table.cat-t td.c-mine { box-shadow: inset 0 0 0 9999px rgba(255, 220, 90, .18); }
.mline.picked { outline: 2px solid #2f5bd3; background: #eef3ff; }
@media (max-width: 760px) { .modal.isearch { height: auto; min-height: 100%; width: 100%; } .isearch-f { position: sticky; bottom: -12px; background: #fff; padding-bottom: 8px; } }
.tag.blue { color: #1d3a7a; background: #e3ecff; }

/* filter user ala Trello (Tanya Harga) */
.ubar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 6px 10px; }
.ubar-l { font-weight: 700; color: var(--ink-2); font-size: 12.5px; }
.ubar-all { border: 1px solid var(--line-2); background: #fff; border-radius: 14px; padding: 3px 10px; font-size: 12px; font-weight: 700; cursor: pointer; color: var(--ink-2); }
.ubar-all.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.ubar-list { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.ubar-sep { width: 1px; height: 22px; background: var(--line-2); margin: 0 4px; }
.ubub { position: relative; min-width: 30px; height: 30px; padding: 0 6px; border-radius: 15px; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.12); font-size: 11px; font-weight: 800; letter-spacing: .02em; cursor: pointer; transition: transform .08s, opacity .08s; font-family: inherit; }
.ubub:hover { transform: translateY(-1px); box-shadow: 0 0 0 2px rgba(0,0,0,.25); }
.ubub.on { box-shadow: 0 0 0 2px var(--ink); }
.ubub.dim { opacity: .38; }
.ubub-ck { position: absolute; right: -5px; bottom: -5px; width: 15px; height: 15px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 9px; line-height: 15px; text-align: center; border: 1px solid #fff; }
.ubar-txt { margin-left: 6px; }
@media (max-width: 760px) { .ubar-txt { flex-basis: 100%; margin: 0; } }

/* ===== Grid ala Microsoft Dynamics: isian di dalam tabel tanpa kotak.
   Diam = teks biasa; hover = garis bawah abu; fokus = garis bawah biru + baris disorot. Berlaku di semua modul (desktop). */
@media (min-width: 761px) {
  table.t td .cellin,
  table.t td .input:not(textarea),
  table.t td select,
  table.t td input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=color]):not([type=date]) {
    border: 0 !important; border-bottom: 1px solid transparent !important; border-radius: 0 !important;
    background-color: transparent !important; box-shadow: none !important;
    min-height: 30px; padding: 4px 6px; transition: border-color .08s, background-color .08s;
  }
  table.t td select { -webkit-appearance: none; appearance: none; padding-right: 18px; cursor: pointer;
    background-image: linear-gradient(45deg, transparent 50%, #8a8886 50%), linear-gradient(135deg, #8a8886 50%, transparent 50%) !important;
    background-position: calc(100% - 10px) 55%, calc(100% - 6px) 55% !important; background-size: 4px 4px, 4px 4px !important; background-repeat: no-repeat !important; }
  table.t td select:not(:hover):not(:focus) { background-image: none !important; }
  table.t td .cellin:hover:not([readonly]):not(:focus),
  table.t td .input:hover:not([readonly]):not(:focus),
  table.t td select:hover:not(:focus),
  table.t td input:hover:not([readonly]):not(:focus):not([type=checkbox]):not([type=radio]) { border-bottom-color: #8a8886 !important; background-color: #f3f2f1 !important; }
  table.t td .cellin:focus, table.t td .input:focus, table.t td select:focus,
  table.t td input:focus:not([type=checkbox]):not([type=radio]) {
    outline: none !important; border-bottom: 2px solid #0f6cbd !important; background-color: #fff !important; padding-bottom: 3px; }
  table.t td .cellin[readonly], table.t td .input[readonly] { color: var(--ink-2); cursor: default; }
  table.t td .cellin::placeholder, table.t td .input::placeholder { color: #a19f9d; }
  /* baris yang sedang diisi disorot seperti Dynamics */
  table.t tbody tr:focus-within > td { background-color: #eff6fc; }
  table.t tbody tr:focus-within > td:first-child { box-shadow: inset 3px 0 0 #0f6cbd; }
  /* sel wajib yang masih kosong: garis bawah merah, bukan blok merah */
  table.t td.cell-edit.warn { background: transparent; }
  table.t td.cell-edit.warn .cellin, table.t td.cell-edit.warn .input, table.t td.cell-edit.warn select { border-bottom: 1px dashed var(--red) !important; }
  table.t td.cell-edit.warn .cellin::placeholder { color: var(--red-ink); font-weight: 600; }
  table.t td.cell-edit { padding: 1px 2px; }
  /* tombol di dalam grid tampil datar */
  table.t td .btn.sm:not(.primary):not(.danger) { background: transparent; border-color: transparent; }
  table.t td .btn.sm:not(.primary):not(.danger):hover { background: #f3f2f1; border-color: #c8c6c4; }
  table.t td textarea.input { border-color: #e1dfdd; border-radius: 2px; }
}
/* isian form (di luar tabel) gaya Fluent / Dynamics: garis tipis, garis bawah lebih gelap, fokus = garis bawah biru */
.input, select.input, textarea.input { border: 1px solid #d1d1d1; border-bottom-color: #8a8886; border-radius: 4px; }
.input:hover:not(:focus):not([readonly]), select.input:hover:not(:focus) { border-color: #c7c7c7; border-bottom-color: #616161; }
.input:focus, select.input:focus, textarea.input:focus { outline: none; border-color: #d1d1d1; border-bottom: 2px solid #0f6cbd; box-shadow: none; }

/* ======================= Tampilan gaya Slack: topbar + sidebar ungu + isi ======================= */
:root { --sl-top: #2a0e2c; --sl-side: #3a1440; --sl-side-ink: #cdb8d0; --sl-side-line: #52305a; --sl-act: #1164a3; --sl-hover: #4a2450; --sl-badge: #e01e5a; --sl-green: #007a5a; --sl-online: #2bac76; }
.app { height: 100vh; height: 100dvh; display: flex; flex-direction: column; background: var(--sl-top); }
.app-body { flex: 1; min-height: 0; display: flex; }
.app-main { flex: 1; min-width: 0; overflow: auto; background: var(--bg); border-radius: 8px 0 0 0; position: relative; }
.app-main main.page { max-width: 1760px; }
/* topbar */
.tb { height: 44px; flex: none; display: flex; align-items: center; gap: 10px; padding: 0 12px; padding-top: env(safe-area-inset-top); color: #e8dcea; }
.tb-search { flex: 0 1 680px; margin: 0 auto; height: 28px; display: flex; align-items: center; gap: 8px; padding: 0 10px; border: 0; border-radius: 6px; background: #4a2a4d; color: #d9c7dc; font: inherit; font-size: 13px; cursor: pointer; text-align: left; }
.tb-search:hover { background: #573459; }
.tb-search kbd, .gs kbd { font: inherit; font-size: 11px; padding: 1px 6px; border-radius: 4px; background: rgba(255,255,255,.12); color: inherit; }
.tb-btn { position: relative; width: 32px; height: 32px; border: 0; border-radius: 6px; background: transparent; color: #e8dcea; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.tb-btn:hover { background: rgba(255,255,255,.1); }
.tb-badge { position: absolute; top: 0; right: -2px; min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box; border-radius: 8px; background: var(--sl-badge); color: #fff; font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; }
.tb-me { min-width: 28px; height: 28px; padding: 0 4px; box-sizing: border-box; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 800; text-decoration: none; }
/* sidebar */
.sb { width: 260px; flex: none; display: flex; flex-direction: column; background: var(--sl-side); color: var(--sl-side-ink); border-radius: 8px 0 0 0; margin-left: 6px; overflow: hidden; font-size: 15px; }
.sb-ws { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--sl-side-line); }
.sb-ws img { border-radius: 8px; background: #fff; padding: 3px; box-sizing: border-box; }
.sb-wsn { color: #fff; font-weight: 800; font-size: 16px; }
.sb-wss { font-size: 12px; color: var(--sl-side-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-new { width: 32px; height: 32px; flex: none; border-radius: 50%; background: #fff; color: var(--sl-side); display: inline-flex; align-items: center; justify-content: center; }
.sb-scroll { flex: 1; overflow-y: auto; padding: 8px 8px 12px; }
.sb-grp { display: flex; flex-direction: column; gap: 1px; margin-bottom: 6px; }
.sb-h { display: flex; align-items: center; gap: 6px; width: 100%; padding: 8px 8px 4px; border: 0; background: none; color: var(--sl-side-ink); font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; text-align: left; }
.sb-car { display: inline-block; font-size: 10px; transition: transform .1s; } .sb-car.on { transform: rotate(90deg); }
.sb-i { display: flex; align-items: center; gap: 8px; padding: 5px 10px; border-radius: 6px; color: var(--sl-side-ink); text-decoration: none; min-height: 28px; }
a.sb-i:hover { background: var(--sl-hover); color: #fff; }
.sb-i.unread { color: #fff; font-weight: 700; }
.sb-i.on { background: var(--sl-act); color: #fff; font-weight: 700; }
.sb-i svg { flex: none; opacity: .9; }
.sb-l { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-badge { min-width: 18px; height: 18px; padding: 0 6px; box-sizing: border-box; border-radius: 9px; background: var(--sl-badge); color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; }
.sb-u { padding: 3px 10px; }
.sb-ava { position: relative; display: inline-flex; }
.sb-ava .uchip-b { border-radius: 6px; }
.sb-dot { position: absolute; right: -3px; bottom: -3px; width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--sl-side); background: transparent; box-shadow: inset 0 0 0 1.5px #8e7591; }
.sb-dot.on { background: var(--sl-online); box-shadow: none; }
.sb-role { font-size: 11px; opacity: .7; }
.sb-me { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--sl-side-line); }
.sb-meava { min-width: 32px; height: 32px; padding: 0 4px; box-sizing: border-box; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 11px; flex: none; }
.sb-men { color: #fff; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-out { width: 30px; height: 30px; border: 0; border-radius: 6px; background: transparent; color: var(--sl-side-ink); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.sb-out:hover { background: var(--sl-hover); color: #fff; }
/* tombol ciutkan sidebar + mode ikon saja (desktop) */
.sb-mini-btn { width: 26px; height: 26px; flex: none; border: 0; border-radius: 6px; background: transparent; color: var(--sl-side-ink); font: inherit; font-size: 16px; font-weight: 700; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.sb-mini-btn:hover { background: var(--sl-hover); color: #fff; }
@media (min-width: 761px) {
  .sb { transition: width .15s ease-out; }
  .sb.mini { width: 60px; font-size: 14px; }
  .sb.mini .sb-ws { flex-direction: column; gap: 8px; padding: 10px 0; }
  .sb.mini .sb-ws > div, .sb.mini .sb-l, .sb.mini .sb-role, .sb.mini .sb-h, .sb.mini .sb-me a > div { display: none; }
  .sb.mini .sb-scroll { padding: 8px 6px 12px; overflow-x: hidden; }
  .sb.mini .sb-grp { margin-bottom: 0; padding-bottom: 6px; border-bottom: 1px solid var(--sl-side-line); margin-top: 6px; }
  .sb.mini .sb-grp:last-child { border-bottom: 0; }
  .sb.mini .sb-i { position: relative; justify-content: center; padding: 7px 0; min-height: 34px; }
  .sb.mini .sb-badge { position: absolute; top: 1px; right: 1px; min-width: 15px; height: 15px; padding: 0 3px; font-size: 9.5px; line-height: 15px; border-radius: 8px; }
  .sb.mini .sb-me { flex-direction: column; gap: 6px; padding: 10px 0; }
  .sb.mini .sb-me a { flex: none !important; }
  .sb.mini .sb-u .uchip-b { max-width: 44px; padding: 0 4px; font-size: 9px; overflow: hidden; text-overflow: clip; }
  .sb.mini .sb-meava { max-width: 44px; overflow: hidden; font-size: 10px; }
}
@media (max-width: 760px) { .sb-mini-btn { display: none; } }
/* judul halaman ala channel + tab bergaris bawah */
main.page > .row:first-child h2.title, .ph h2.title { font-size: 20px; font-weight: 800; }
.ph { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.ph-sub { font-size: 13px; color: var(--ink-2); }
.chips[role=tablist], .tabs { display: flex; flex-wrap: wrap; gap: 4px 20px; border-bottom: 1px solid var(--line); background: transparent; padding: 0 2px; }
.chips[role=tablist] .chip, .tabs .tab { border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; padding: 8px 2px; min-height: 0; color: var(--ink-2); font: inherit; font-weight: 600; cursor: pointer; margin-bottom: -1px; }
.chips[role=tablist] .chip:hover, .tabs .tab:hover { color: var(--ink); }
.chips[role=tablist] .chip.on, .tabs .tab.on { background: transparent; color: var(--ink); font-weight: 800; border-bottom-color: var(--sl-act); }
.btn.primary { background: var(--sl-green); border-color: var(--sl-green); }
.btn.primary:hover:not(:disabled) { background: #006a4e; border-color: #006a4e; }
/* Ctrl+K */
.gs-scrim { align-items: flex-start; padding-top: 8vh; }
.gs { width: min(720px, 100%); background: #fff; border-radius: 10px; box-shadow: 0 18px 50px rgba(0,0,0,.35); overflow: hidden; }
.gs-in { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); color: var(--ink-2); }
.gs-in input { flex: 1; border: 0; outline: none; font: inherit; font-size: 17px; color: var(--ink); background: transparent; }
.gs kbd { background: #f0f0f0; color: var(--ink-2); }
.gs-list { max-height: 60vh; overflow: auto; padding: 6px 0; }
.gs-g { padding: 8px 16px 4px; font-size: 12px; font-weight: 700; color: var(--ink-2); text-transform: uppercase; letter-spacing: .04em; }
.gs-r { display: flex; align-items: center; gap: 12px; padding: 7px 16px; color: var(--ink); text-decoration: none; }
.gs-r.on { background: var(--sl-act); color: #fff; } .gs-r.on .sub { color: #dbe8f5; }
.gs-m { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gs-s { flex: none; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
/* Aktivitas */
.feed { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.feed-day { display: flex; align-items: center; gap: 10px; padding: 10px 16px 2px; font-size: 12px; font-weight: 700; color: var(--ink-2); }
.feed-day::before, .feed-day::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.feed-i { display: flex; gap: 12px; align-items: flex-start; width: 100%; padding: 10px 16px; border: 0; border-bottom: 1px solid #f2f2f2; background: #fff; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.feed-i:hover { background: #f8f8f8; }
.feed-i.unread { background: #f4f8fc; box-shadow: inset 3px 0 0 var(--sl-act); }
.feed-i .uchip-b { border-radius: 6px; min-width: 34px; height: 34px; flex: none; }
.feed-sys { width: 34px; height: 34px; flex: none; border-radius: 6px; background: #e8e8e8; color: var(--ink-2); display: inline-flex; align-items: center; justify-content: center; font-weight: 800; }
.feed-b { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.feed-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; }
.feed-t { margin-left: auto; font-size: 12px; color: var(--ink-2); }
.feed-x { font-size: 14.5px; line-height: 1.4; }
/* penanda dokumen belum dibaca */
tr.unread-row td { font-weight: 700; }
.unread-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--sl-act); margin-right: 6px; vertical-align: middle; }
.kcard.unread { box-shadow: inset 3px 0 0 var(--sl-act), 0 1px 2px rgba(0,0,0,.08); }
@media (max-width: 760px) {
  .app { height: auto; min-height: 100vh; }
  .app-body { display: block; }
  .app-main { overflow: visible; border-radius: 10px 10px 0 0; }
  .tb { position: sticky; top: 0; z-index: 40; background: var(--sl-top); }
  .tb-search { margin: 0; flex: 1; }
  .sb { position: fixed; top: 0; bottom: 0; left: 0; z-index: 80; margin: 0; border-radius: 0; width: 82vw; max-width: 300px; transform: translateX(-102%); transition: transform .18s ease-out; padding-top: env(safe-area-inset-top); }
  .sb.open { transform: none; box-shadow: 0 0 40px rgba(0,0,0,.4); }
  .sb-scrim { position: fixed; inset: 0; z-index: 70; background: rgba(0,0,0,.45); }
  .sb-i { min-height: 40px; }
}
/* panel thread di Antrian (board + panel kanan) */
.board-split { display: flex; gap: 12px; align-items: flex-start; }
.board-split > .board { flex: 1; min-width: 0; }
.thp { flex: 0 0 520px; width: 520px; max-width: 46%; position: sticky; top: 8px; max-height: calc(100vh - 70px); display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 4px 18px rgba(0,0,0,.08); overflow: hidden; }
.thp-h { display: flex; align-items: center; gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.thp-t { font-weight: 800; font-size: 16px; }
.thp-body { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 12px; }
.thp-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.thp-note { background: #fafafa; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; white-space: pre-line; }
.thp-lines { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.thp-row { display: flex; align-items: stretch; border-bottom: 1px solid #f0f0f0; background: #fff; }
.thp-row > .rowsel { margin: 10px 0 0 10px; flex: 0 0 auto; }
.thp-row .thp-line { width: 100%; border-bottom: 0; }
.win-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; }
.thp-line { display: flex; align-items: flex-start; gap: 8px; padding: 8px 10px; border: 0; border-bottom: 1px solid #f0f0f0; background: #fff; font: inherit; text-align: left; cursor: pointer; color: inherit; }
.thp-line:last-child { border-bottom: 0; }
.thp-line:hover { background: #f4f8fc; }
.thp-lb { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.thp-ls { display: flex; align-items: center; gap: 4px; flex: none; }
.kcard.sel { outline: 2px solid var(--sl-act); outline-offset: 1px; }
/* thread: riwayat + catatan */
.thr { display: flex; flex-direction: column; gap: 8px; }
.thr-list { display: flex; flex-direction: column; }
.thr-i { display: grid; grid-template-columns: 36px 1fr; gap: 8px; padding: 4px 4px; border-radius: 6px; }
.thr-i:not(.cont) { margin-top: 6px; }
.thr-i:hover { background: #f8f8f8; }
.thr-ava .uchip-b { border-radius: 6px; min-width: 34px; height: 34px; }
.thr-h { font-size: 14px; }
.thr-note { font-size: 14.5px; line-height: 1.45; white-space: pre-wrap; word-break: break-word; }
.thr-ev { font-size: 13px; color: var(--ink-2); }
.thr-evk { color: var(--ink); font-weight: 600; }
.thr-evd { font-size: 12.5px; color: var(--ink-2); }
.mention { background: #e8f1fa; color: #1264a3; font-weight: 700; border-radius: 4px; padding: 0 3px; }
.mbox { position: relative; background: #fff; border: 1px solid #c8c6c4; border-radius: 8px; padding: 6px 8px; display: flex; flex-direction: column; gap: 4px; }
.mbox:focus-within { border-color: #8a8886; box-shadow: 0 0 0 1px #8a8886; }
.mbox textarea { border: 0; outline: none; resize: vertical; min-height: 40px; font: inherit; font-size: 14.5px; background: transparent; }
.mbox-bar { display: flex; align-items: center; gap: 8px; }
.mbox-at { width: 28px; height: 28px; border: 0; border-radius: 6px; background: transparent; font: inherit; font-weight: 800; font-size: 15px; color: var(--ink-2); cursor: pointer; }
.mbox-at:hover { background: #f0f0f0; }
.mbox-pick { position: absolute; left: 6px; right: 6px; bottom: calc(100% + 4px); background: #fff; border: 1px solid var(--line-2); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.16); padding: 4px; z-index: 5; display: flex; flex-direction: column; }
.mbox-o { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 0; border-radius: 6px; background: #fff; font: inherit; text-align: left; cursor: pointer; }
.mbox-o.on { background: var(--sl-act); color: #fff; } .mbox-o.on .sub { color: #dbe8f5; }
.dd-side .thr { max-height: none; }
@media (max-width: 1100px) { .board-split.with-panel { flex-direction: column; } .thp { position: static; width: 100%; max-width: none; flex: none; max-height: none; } }
@media (min-width: 761px) { .tb-btn.only-m { display: none; } }
.gs-r.on .gs-s span, .gs-r.on .gs-s b { color: #fff !important; }
.thp .mbox { position: sticky; bottom: 0; z-index: 2; }
/* Admin › Maintenance: kartu bisa diklik */
.mcard { cursor: pointer; transition: box-shadow .1s, border-color .1s; }
.mcard:hover { border-color: var(--sl-act); box-shadow: 0 2px 8px rgba(17,100,163,.15); }
.mcard.on { border-color: var(--sl-act); box-shadow: inset 0 -3px 0 var(--sl-act); }
.mlink { float: right; color: var(--sl-act); font-weight: 700; }
.mthumb { width: 56px; height: 42px; object-fit: cover; border-radius: 4px; border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: center; background: #f4f4f4; }
.mthumb.pdf { font-size: 11px; font-weight: 800; color: #b42318; }
/* scanner kamera */
.scanbox { position: relative; width: 100%; aspect-ratio: 4 / 3; max-height: 60vh; background: #111; border-radius: 8px; overflow: hidden; }
.scanbox video { width: 100%; height: 100%; object-fit: cover; display: block; }
.scanframe { position: absolute; left: 8%; right: 8%; top: 30%; bottom: 30%; border: 2px solid rgba(255,255,255,.85); border-radius: 8px; box-shadow: 0 0 0 9999px rgba(0,0,0,.35); pointer-events: none; }
/* garis merah tetap di tengah bingkai: barcode diarahkan supaya garis ini memotong semua batang barcode */
.scanline { position: absolute; left: 2%; right: 2%; top: 50%; height: 3px; margin-top: -1.5px; background: #ff1a1a; border-radius: 2px; box-shadow: 0 0 6px 1px rgba(255,26,26,.9); pointer-events: none; }
/* mode cadangan (html5-qrcode): garis merah di tengah video */
.scanlib { position: relative; width: 100%; }
.scanlib > .scanline { left: 8%; right: 8%; z-index: 2; }

/* Cetak label */
.lbl-src { display: flex; flex-direction: column; gap: 8px; }
.lbl-paste { width: 100%; min-height: 64px; resize: vertical; }
.lbl-grid { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start; }
.lbl-grid > .card:first-child { flex: 999 1 560px; }
.lbl-tpl { flex: 1 1 280px; display: flex; flex-direction: column; gap: 8px; }
.lbl-t tr.off td { color: var(--ink-3); background: #fafafa; }
.lbl-t tr.skip td { background: var(--red-bg); color: var(--ink-2); }
.lbl-t tfoot td { background: var(--surface-2); border-top: 1px solid var(--line); }
table.lblpick tr.sel td { background: var(--blue-bg); }
table.lblpick tr.cur td { box-shadow: inset 0 1px 0 var(--blue), inset 0 -1px 0 var(--blue); }
table.lblpick tr.inactive td { color: var(--ink-3); }
.lbl-prev { overflow: auto; padding: 6px 0 2px; }
.lbl-prev-in { transform-origin: 0 0; }
.lbl-prev .lbr { margin-bottom: 3mm; outline: 1px solid #80858c; background: #fff; }
.lbl-prev .lbl { outline: 1px dashed #c9cdc8; outline-offset: -1px; }

/* Antrian: baris terpilih & teks tanya vendor */
table.t tr.q-sel > td { background: var(--blue-bg); }
.vt-text { width: 100%; font-family: var(--f-ui); font-size: 14px; line-height: 1.45; white-space: pre-wrap; resize: vertical; min-height: 260px; }

/* detail hasil pencarian (Ctrl+K) */
.sd-scrim { z-index: 81; }
.gs.sd { max-width: 860px; }
.sd-body { padding: 12px 16px 14px; display: flex; flex-direction: column; gap: 12px; max-height: 72vh; overflow: auto; }
.sd-h > b { font-size: 17px; }
.sd-sec { display: block; }
.sd-sec > .sd-stock, .sd-sec > table, .sd-sec > div.sub { margin-top: 6px; }
.sd-stock { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; }
.sd-stock > div { border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; display: flex; flex-direction: column; font-variant-numeric: tabular-nums; }
.sd-stock > div.has { background: var(--green-bg); border-color: #b6dcbc; }
.sd-stock > div.tot { background: var(--surface-2); }
.sd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 6px 16px; }
.sd-kv { display: flex; flex-direction: column; }

/* ---------------- Stok Opname */
.op { display: flex; flex-direction: column; gap: 14px; }
.op-tabs { margin-bottom: 2px; flex-wrap: wrap; }
.op-tabs a.tab { text-decoration: none; }
.tag.violet { color: var(--violet-ink); background: var(--violet-bg); }
.tag.cls-A { color: #fff; background: #c0302a; } .tag.cls-B { color: #fff; background: #b25f00; } .tag.cls-C { color: #fff; background: #2a63d4; } .tag.cls-D { color: #fff; background: #6b7078; }
.op-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.op-kpis.five { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.op-kpis.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.op-kpi { display: flex; flex-direction: column; gap: 2px; }
.op-big { font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.2; }
.op-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr); gap: 14px; align-items: start; }
.op-grid.wide { grid-template-columns: minmax(0, 1fr) 320px; }
.op-grid.even { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); }
.op-side { display: flex; flex-direction: column; gap: 6px; position: sticky; top: 8px; }
.prm { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 4px 0; border-bottom: 1px solid var(--surface-2); font-size: 14px; }
.op-acts { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.op-act { display: block; padding: 8px 10px; border-radius: 6px; border-left: 4px solid var(--line-2); background: var(--surface-2); color: inherit; text-decoration: none; }
.op-act.red { border-color: var(--red); background: var(--red-bg); } .op-act.amber { border-color: var(--amber); background: var(--amber-bg); } .op-act.blue { border-color: var(--blue); background: var(--blue-bg); }
.op-st { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; } .op-st h3 { margin: 0; font-size: 16px; }
.op-n { width: 24px; height: 24px; border-radius: 50%; background: var(--sl-side); color: #fff; font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.op-kinds { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; }
.op-kind { display: flex; flex-direction: column; gap: 2px; text-align: left; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: 8px; background: #fff; cursor: pointer; }
.op-kind.on { border: 2px solid var(--sl-act); background: #eef5fb; padding: 9px 11px; }
.op-steps { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; padding: 0; }
.op-steps li { display: flex; align-items: center; gap: 6px; color: var(--ink-3); font-weight: 700; }
.op-steps li span { width: 22px; height: 22px; border-radius: 50%; border: 2px solid currentColor; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; }
.op-steps li.on { color: var(--sl-act); } .op-steps li.done { color: var(--green-ink); }
table.t tr.op-diff td { background: #fdf3f2; }
.op-rev td { vertical-align: top; }
.op-rev select.input, .op-rev input.input { height: 30px; font-size: 13px; }
.op-need { border-color: var(--red) !important; box-shadow: inset 0 0 0 1px var(--red); }
.op-unk { display: flex; flex-direction: column; gap: 10px; }
.card.op-open { border-left: 4px solid var(--amber); }
.op-cw { display: inline-flex; align-items: center; gap: 3px; margin-right: 8px; white-space: nowrap; font-size: 12px; }
.op-dist { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; }
.op-qr svg { width: 34px; height: 34px; display: block; }
.op-set { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.op-set .card { display: flex; flex-direction: column; gap: 4px; }
.op-rep { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 14px; align-items: start; }
.op-bars { display: flex; gap: 10px; align-items: flex-end; height: 140px; padding: 10px 0; }
.op-bar { flex: 1; max-width: 90px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 2px; min-width: 34px; }
.op-bar-v { width: 70%; border-radius: 4px 4px 0 0; min-height: 4px; }
.op-hbar { display: flex; align-items: center; gap: 8px; padding: 3px 0; }
.op-hbar-b { flex: 0 0 35%; height: 10px; background: var(--surface-2); border-radius: 5px; overflow: hidden; } .op-hbar-b span { display: block; height: 10px; background: var(--red); }
@media (max-width: 1000px) { .op-grid, .op-grid.wide, .op-grid.even { grid-template-columns: minmax(0, 1fr); } .op-side { position: static; } .op-rep { grid-template-columns: minmax(0, 1fr); } }

/* Stok Opname di HP (penghitung) */
.hp { max-width: 560px; display: flex; flex-direction: column; gap: 12px; }
.hp-h { display: flex; align-items: center; gap: 10px; }
.hp-back { font-size: 26px; line-height: 1; padding: 0 10px; height: 40px; }
.hp-sec { margin: 6px 0 -4px; font-size: 15px; }
.hp-card { display: flex; flex-direction: column; gap: 6px; }
.hp-card.amber { border-left: 4px solid var(--amber); background: #fffaf2; } .hp-card.red { border-left: 4px solid var(--red); background: #fff6f5; }
.hp-item { display: flex; align-items: center; gap: 8px; padding: 8px 4px; border-top: 1px solid var(--line); color: inherit; text-decoration: none; }
.hp-go { font-size: 22px; color: var(--ink-3); }
a.hp-zone { display: flex; flex-direction: column; gap: 3px; color: inherit; text-decoration: none; }
a.hp-zone.done { opacity: .75; }
.hp-big { height: 48px; font-size: 16px; width: 100%; justify-content: center; }
.hp-scan form .input { height: 44px; }
.hp-cur { display: flex; flex-direction: column; gap: 8px; border: 2px solid var(--sl-act); }
.hp-code { font-size: 22px; font-weight: 800; letter-spacing: .02em; }
.hp-qty { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.input.hp-num { height: 48px; font-size: 22px; font-weight: 700; text-align: right; }
.hp-row { border-top: 1px solid var(--line); }
.hp-row:first-of-type { border-top: 0; }
.hp-rowbtn { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: none; text-align: left; padding: 9px 12px; cursor: pointer; font: inherit; color: inherit; }
.hp-tot { font-size: 18px; }
.hp-ents { padding: 4px 12px 10px; display: flex; flex-direction: column; gap: 6px; background: var(--surface-2); }
.hp-exp { display: flex; align-items: center; gap: 8px; padding: 6px 12px; border-top: 1px solid var(--surface-2); color: var(--ink-2); }
.hp-hits { border: 1px solid var(--line); border-radius: 8px; max-height: 320px; overflow-y: auto; margin-top: 6px; background: var(--surface); }
.hp-hit { display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px; border: 0; border-top: 1px solid var(--line); background: none; color: inherit; font: inherit; cursor: pointer; }
.hp-hit:first-child { border-top: 0; }
.hp-hit:hover, .hp-hit:focus-visible { background: var(--surface-2); }
.hp-exp.ok { color: var(--green-ink); }
.hp-foot { position: sticky; bottom: 0; background: var(--bg); padding: 8px 0; }
@media (max-width: 760px) { .op-kpis.three { grid-template-columns: 1fr; } .op-big { font-size: 20px; } }

/* Sync Shopify: kotak tahap & bar progres */
.shp-ph { border: 1px solid var(--line); background: #f7f8f6; border-radius: 8px; padding: 10px 12px; }
.shp-ph.on { border-color: var(--override-line); background: var(--override); }
.shp-bar { height: 22px; border-radius: 6px; background: var(--surface-2); border: 1px solid var(--line-2); overflow: hidden; }
.shp-bar > span { display: block; height: 100%; background: var(--blue); transition: width .4s; }
.shp-bar.done > span { background: var(--green); }
.shp-bar.stop > span { background: var(--amber); }
.shp-mini { height: 8px; border-radius: 4px; background: #e3e6e2; overflow: hidden; margin: 6px 0 4px; }
.shp-mini > span { display: block; height: 100%; }

/* ================= LineEditor (isi harga Purchasing): 3 langkah ================= */
.modal.le { padding-top: 0; }
.modal.le .modal-h { position: sticky; top: 0; z-index: 5; background: var(--surface-2); margin: 0 -16px; padding: 14px 16px 12px; border-bottom: 2px solid var(--ink); border-radius: 12px 12px 0 0; }
.le-head { display: flex; flex-direction: column; gap: 4px; }
.le-code { font-weight: 800; background: var(--ink); color: #fff; border-radius: 6px; padding: 1px 8px; font-size: 13px; }
.le-brand { font-weight: 700; font-size: 13px; color: var(--ink-2); }
.le-title { margin: 0; font-size: 19px !important; font-weight: 800; line-height: 1.25; }
.le-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; color: var(--ink-2); align-items: center; }
.le-qty { font-weight: 800; color: var(--blue-ink); background: var(--blue-bg); border-radius: 6px; padding: 1px 8px; font-size: 14px; }
.le-step { display: flex; gap: 12px; align-items: flex-start; }
.le-n { width: 26px; height: 26px; border-radius: 50%; background: var(--ink); color: #fff; font-weight: 800; font-size: 13px; display: flex; align-items: center; justify-content: center; flex: none; margin-top: 1px; }
.le-sec { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.le-sec-h { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.le-sec-h > b { font-size: 16px; }
.le-lnk { border: none; background: none; padding: 4px 2px; color: var(--blue-ink); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.le-lnk:hover { text-decoration: underline; }
.le-vt { min-width: 760px; }
.le-vt td { vertical-align: middle; }
.le-vt tr.sel td { background: #eef8f0; }
.le-vt td.num .sub, .le-vt td.num .sub { display: block; }
.le-star { display: block; font-size: 12px; font-weight: 700; color: var(--green-ink); }
.le-ppn { display: flex; width: max-content; margin: 0 0 4px auto; border: 1px solid var(--line, #d0d4da); border-radius: 6px; overflow: hidden; }
.le-ppn button { border: 0; background: #fff; font: inherit; font-size: 11px; font-weight: 700; padding: 2px 8px; cursor: pointer; color: var(--ink-2); }
.le-ppn button + button { border-left: 1px solid var(--line, #d0d4da); }
.le-ppn button.on { background: #0b3d91; color: #fff; }
.le-dchip { font-weight: 800; background: var(--surface-2); border-radius: 6px; padding: 2px 8px; font-size: 14px; }
.le-dchip.w { background: var(--amber-bg); color: var(--amber-ink); }
.le-hb { font-size: 16px; }
.le-panel { background: #f7f8f6; border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.le-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; }
.le-grid .input { text-align: right; }
.le-ref { font-weight: 400; color: var(--ink-3); font-size: 11px; }
.le-chg { background: #fff3c4 !important; border: 2px solid var(--amber) !important; }
.le-calc { font-size: 13px; color: var(--ink-2); background: #fff; border: 1px dashed var(--line-2); border-radius: 8px; padding: 6px 10px; }
.le-calc b { color: var(--ink); }
.le-picks { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; }
.le-pick { font: inherit; color: var(--ink); text-align: left; border: 2px solid var(--line-2); border-radius: 10px; background: var(--surface); padding: 10px 14px; display: flex; gap: 12px; align-items: center; cursor: pointer; min-height: 72px; }
.le-pick:hover:not(:disabled) { border-color: var(--blue); }
.le-pick:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.le-pick:disabled { cursor: default; opacity: .65; }
.le-dot { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--ink-3); flex: none; box-sizing: border-box; }
.le-pc { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.le-pl { font-size: 13px; font-weight: 700; color: var(--ink-2); }
.le-pv { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.15; }
.le-tag { font-size: 12px; font-weight: 800; border-radius: 999px; padding: 2px 9px; margin-left: auto; align-self: flex-start; white-space: nowrap; color: #fff; }
.le-tag.g { background: var(--green); }
.le-tag.o { background: var(--amber-ink); }
.le-pick.on { border-color: var(--green); background: var(--green-bg); }
.le-pick.on .le-dot { border: 6px solid var(--green); }
.le-pick.hot { border-color: var(--amber); background: var(--amber-bg); }
.le-pick.hot .le-dot { border-color: var(--amber); }
@media (prefers-reduced-motion: no-preference) {
  .le-pick.hot { animation: leHot 1.1s ease-in-out infinite; }
  @keyframes leHot { 50% { box-shadow: 0 0 0 5px rgba(178, 95, 0, .28); background: #ffe2a8; } }
}
.le-alert { display: flex; gap: 10px; align-items: center; background: var(--red-bg); border: 1px solid #e7a7a2; color: var(--red-ink); border-radius: 8px; padding: 9px 12px; }
.le-alert svg { flex: none; }
.le-result { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; align-items: start; }
.le-big { font-size: 20px !important; font-weight: 800; min-height: 46px; }
.le-big.bad { border: 2px solid var(--red) !important; color: var(--red-ink); }
.le-cust { border-radius: 8px; background: var(--surface-2); padding: 6px 12px; min-height: 46px; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.le-cust b { font-size: 20px; font-variant-numeric: tabular-nums; }
.le-incl-in { font-size: 20px !important; font-weight: 800; min-height: 46px; }
.le-m { border-radius: 8px; padding: 6px 12px; min-height: 46px; box-sizing: border-box; display: flex; flex-direction: column; gap: 5px; justify-content: center; background: var(--surface-2); }
.le-m.ok { background: var(--green-bg); color: var(--green-ink); }
.le-m.bad { background: var(--red-bg); color: var(--red-ink); border: 2px solid var(--red); }
.le-mp { font-size: 20px; }
.le-bars { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--ink-2); }
.le-bar { display: flex; align-items: center; gap: 8px; }
.le-bar > span:first-child { width: 34px; flex: none; }
.le-track { flex: 1; height: 8px; border-radius: 4px; background: rgba(0, 0, 0, .08); overflow: hidden; display: block; }
.le-track > span { display: block; height: 8px; border-radius: 4px; }
@media (prefers-reduced-motion: no-preference) {
  .le-m.bad { animation: leBad 1.1s ease-in-out infinite; }
  @keyframes leBad { 50% { background: #f6c3bf; } }
}
.le-seg { display: inline-flex; border: 2px solid #1e3a8a; border-radius: 8px; overflow: hidden; }
.le-seg button { font: inherit; font-size: 14px; font-weight: 700; border: none; background: #fff; padding: 0 16px; min-height: 40px; cursor: pointer; color: #1e3a8a; }
.le-seg button + button { border-left: 2px solid #1e3a8a; }
.le-seg button:hover:not(.on) { background: #e3ecfd; }
.le-seg button.on { background: #1e3a8a; color: #fff; font-weight: 800; }
.le-seg button:focus-visible { outline: 3px solid #0f6cbd; outline-offset: -3px; }
.le-more { display: flex; flex-direction: column; gap: 6px; }
.le-foot { position: sticky; bottom: 0; z-index: 4; margin: 0 -16px -16px; padding: 12px 16px; background: #f7f8f6; border-top: 1px solid var(--line); border-radius: 0 0 12px 12px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.le-sum { flex: 1 1 280px; display: flex; flex-direction: column; gap: 1px; }
.le-sum b { font-size: 16px; }
.le-sum-bad { color: var(--red-ink); font-weight: 800; font-size: 13px; }
/* pop-up margin minus */
.modal.le-mm { width: min(560px, 100%); padding-top: 0; }
.modal.le-mm .modal-h { background: var(--red); color: #fff; margin: 0 -16px; padding: 14px 16px; border-radius: 12px 12px 0 0; }
.modal.le-mm .modal-h h3 { font-size: 20px; color: #fff; }
.modal.le-mm .modal-h .btn.ghost { color: #fff; }
.le-item { background: var(--surface-2); border-radius: 8px; padding: 8px 12px; display: flex; flex-direction: column; gap: 2px; }
.le-iname { font-size: 16px; font-weight: 800; line-height: 1.25; }
.le-mm-nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.le-mm-nums > div { background: var(--surface-2); border-radius: 8px; padding: 8px 10px; display: flex; flex-direction: column; }
.le-mm-nums span { font-size: 12px; font-weight: 700; color: var(--ink-2); }
.le-mm-nums b { font-size: 18px; font-variant-numeric: tabular-nums; }
.le-mm-nums .bad { background: var(--red-bg); }
.le-mm-nums .bad b { color: var(--red-ink); }
.le-fix { font: inherit; display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; text-align: left; border: 2px solid var(--amber); background: var(--amber-bg); border-radius: 10px; padding: 8px 12px; cursor: pointer; color: var(--ink); min-height: 52px; }
.le-fix-go { background: var(--amber-ink); color: #fff; font-weight: 800; border-radius: 999px; padding: 4px 12px; font-size: 13px; white-space: nowrap; }
.le-or { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ink-3); }
.le-or::before, .le-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
@media (max-width: 720px) {
  .modal.le .modal-h { top: 0; border-radius: 0; margin: 0 -12px; }
  .le-foot { bottom: 0; margin: 0 -12px -12px; border-radius: 0; }
  .le-step { gap: 8px; }
  .le-n { display: none; }
}
.le-sec div.f, .modal.le-mm div.f { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: var(--ink-2); min-width: 0; }
/* isian di panel rincian tampil sebagai kotak biasa (mengalahkan gaya isian tabel ala Dynamics) */
table.t td .le-panel input.input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=color]):not([type=date]) {
  border: 1px solid var(--line-2) !important; background-color: #fff !important; border-radius: 8px !important; min-height: 40px; padding: 6px 10px; width: 100%; box-sizing: border-box; }
table.t td .le-panel input.input.num:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=color]):not([type=date]) { text-align: right; }
table.t td .le-panel input.input.le-chg:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=color]):not([type=date]) { background-color: #fff3c4 !important; border: 2px solid var(--amber) !important; }
table.t td .le-panel input.input:focus:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=color]):not([type=date]) { border: 2px solid #0f6cbd !important; padding-bottom: 6px; }
.le-src { font-size: 12px; color: var(--ink-2); line-height: 1.35; }

/* filter tombol multi-pilih (Sync Shopify > Pengecualian: Brand / Kategori / Sub kategori / Class) */
.fc-box { display: flex; flex-direction: column; gap: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; }
.fc-box:empty { display: none; }
.fc-row { display: flex; gap: 10px; align-items: flex-start; }
.fc-lab { flex: none; width: 104px; font-size: 12px; font-weight: 800; color: var(--ink-2); padding-top: 6px; }
.fc-n { background: var(--blue); color: #fff; border-radius: 999px; padding: 0 6px; font-size: 11px; }
.fc-chips { display: flex; flex-wrap: wrap; gap: 6px; max-height: 92px; overflow-y: auto; flex: 1; }
.fc-chip { font: inherit; font-size: 13px; display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--line-2); background: #fff; color: var(--ink); border-radius: 999px; padding: 3px 10px; cursor: pointer; min-height: 30px; }
.fc-chip:hover { border-color: var(--blue); }
.fc-chip .n { color: var(--ink-3); font-size: 11px; }
.fc-chip.on { background: var(--blue); border-color: var(--blue); color: #fff; font-weight: 700; }
.fc-chip.on .n { color: #dfe8fb; }
@media (max-width: 720px) { .fc-row { flex-direction: column; gap: 4px; } .fc-lab { width: auto; padding-top: 0; } }
.bg-batal { background: var(--ink-3); }
.bg-sebagian { background: #6a9a2e; }

/* Tanya Harga (board): header halaman dibedakan & tidak ikut ter-scroll; judul status kolom tetap, kartu di-scroll per kolom */
.req-head { display: flex; flex-direction: column; gap: 10px; }
.req-head.on { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; box-shadow: 0 2px 6px rgba(20,22,26,.06); }
.board-fit { align-items: stretch; grid-auto-rows: 100%; padding-bottom: 0; }
.board-fit .col { min-height: 0; padding: 0; gap: 0; overflow: hidden; }
.board-fit .col-h { flex: none; padding: 10px 12px; background: #dfe2dd; border-bottom: 2px solid var(--line-2); border-radius: 10px 10px 0 0; }
.board-fit .col-body { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 10px 10px; display: flex; flex-direction: column; gap: 8px; }
.col-body { display: flex; flex-direction: column; gap: 8px; }
/* Antrian Purchasing (board + panel kanan) pas setinggi layar */
.board-split.fit { align-items: stretch; }
.board-split.fit > .board { height: 100%; }
.board-split.fit .thp { position: static; max-height: none; height: 100%; }
.board-fit .col-body > * { flex: none; }
/* HP: tabel jadi kartu — sisakan ruang kiri untuk label kolom (padding tabel compact/Dynamics tidak boleh menimpa) */
@media (max-width: 760px) {
  table.t:not(.keep-m) tbody td[data-label]:not([data-label=""]) { padding: 6px 0 6px 38%; }
  table.t:not(.keep-m) tbody td[data-label=""], table.t:not(.keep-m) tbody td:not([data-label]) { padding: 6px 0; }
  table.t:not(.keep-m) tbody td.cell-edit[data-label]:not([data-label=""]) { padding: 4px 0 4px 38%; }
  table.t:not(.keep-m) tbody td[colspan] { padding: 8px 12px; }
}
/* Board (Tanya Harga & Antrian Purchasing): halaman memakai seluruh lebar layar & board sampai ke bawah */
@media (min-width: 761px) {
  .app-main main.page:has(.board-fit), .app-main main.page:has(.board-split) { max-width: none; padding-bottom: 10px; }
}
@media (min-width: 761px) { .board.board-fit { grid-auto-columns: minmax(200px, 1fr); gap: 10px; } }
.dc-foot { flex-wrap: wrap; }
.dc-val { white-space: nowrap; }
.dc-foot .uchips { margin-left: auto; justify-content: flex-end; }
/* isi harga: % Markup jual wajib diisi */
table.t td .le-panel input.input.le-err:not([type=checkbox]):not([type=radio]), .le-panel input.input.le-err { border-color: #c62828 !important; background: #fdecea !important; box-shadow: 0 0 0 2px rgba(198,40,40,.25) !important; color: #8e1b1b; }
.le-err-msg { grid-column: 1 / -1; color: #b71c1c; font-weight: 700; font-size: 13px; background: #fdecea; border: 1px solid #f5c2c0; border-radius: 6px; padding: 6px 10px; }
table.t td .le-panel input.input.le-err:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=color]):not([type=date]), table.t td .le-panel input.input.le-chg.le-err:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=color]):not([type=date]) { background-color: #fdecea !important; border: 2px solid #c62828 !important; box-shadow: 0 0 0 2px rgba(198,40,40,.2) !important; }
table.t td input.cellin.le-err, input.cellin.le-err { border: 2px solid #c62828 !important; background: #fdecea !important; box-shadow: 0 0 0 2px rgba(198,40,40,.2) !important; }
@media (min-width: 761px) {
  table.t td input.cellin.le-err:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=color]):not([type=date]) { border: 2px solid #c62828 !important; border-radius: 4px !important; background-color: #fdecea !important; box-shadow: 0 0 0 2px rgba(198,40,40,.2) !important; }
}
.le-block { display: block; margin-top: 4px; color: #b71c1c; background: #fdecea; border: 1px solid #f5c2c0; border-radius: 6px; padding: 4px 8px; font-size: 13px; font-weight: 700; }

/* Kolom WAJIB diisi (label bertanda *): latar kuning muda + garis kuning, supaya langsung terlihat harus diisi */
label.f:has(.req) :is(input.input, select.input, textarea.input):not([readonly]):not(:disabled),
div.f:has(> span .req) :is(input.input, select.input, textarea.input):not([readonly]):not(:disabled),
.input.must { background: var(--must-bg); border-color: var(--must-line); }
label.f:has(.req) :is(input.input, select.input, textarea.input):focus,
div.f:has(> span .req) :is(input.input, select.input, textarea.input):focus,
.input.must:focus { background: #fff; }
td.cell-edit.must:not(.warn), td.cell-edit.must:not(.warn) .cellin { background: var(--must-bg); }
td.cell-edit.must .cellin:focus { background: #fff; }
/* kolom wajib di dalam tabel (mis. vendor yang belum diisi): tetap kuning walau gaya tabel Dynamics menghapus latar */
.cellin.must:not(:focus), table.t td .cellin.must:not(:focus), table.t td input.cellin.must:not(:focus):not(#_) { background-color: var(--must-bg) !important; box-shadow: inset 0 0 0 1px var(--must-line) !important; border-radius: 4px !important; }
.req { color: var(--red); font-weight: 700; }

/* Lead time: tanggal siap (kalender kecil) / lama waktu */
.lt-in { gap: 4px; }
.lt-seg { display: inline-flex; border: 1px solid var(--line-2); border-radius: 8px; overflow: hidden; background: #fff; width: max-content; }
.lt-seg button { border: 0; background: transparent; padding: 5px 10px; font-size: 12px; cursor: pointer; color: var(--ink-2); }
.lt-seg button + button { border-left: 1px solid var(--line-2); }
.lt-seg button.on { background: var(--dark); color: #fff; }
.lt-seg.sm button { padding: 4px 9px; }
.lt-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.lt-cal { position: relative; }
.lt-date { text-align: left; cursor: pointer; min-width: 170px; }
.mc { position: absolute; z-index: 60; top: calc(100% + 4px); left: 0; width: 264px; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.14); }
.mc-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.mc-nav { border: 0; background: transparent; width: 30px; height: 30px; border-radius: 999px; font-size: 18px; cursor: pointer; }
.mc-nav:hover:not(:disabled) { background: #ebecee; } .mc-nav:disabled { opacity: .3; cursor: default; }
.mc-g { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.mc-dn { font-size: 11px; color: var(--ink-3); padding: 2px 0; }
.mc-d { border: 0; background: transparent; height: 32px; border-radius: 999px; font-size: 13px; cursor: pointer; }
.mc-d:hover:not(:disabled) { background: #ebecee; }
.mc-d.today { box-shadow: inset 0 0 0 1px var(--green); }
.mc-d.on { background: var(--green); color: #fff; font-weight: 700; }
.mc-d:disabled { color: #c3c6ca; cursor: default; }
.mc-f { display: flex; justify-content: space-between; margin-top: 6px; }
.le-offer { display: flex; flex-direction: column; gap: 8px; border-top: 1px dashed var(--line); padding-top: 8px; margin-top: 4px; }
.le-offer-tag { display: inline-block; margin-left: 6px; font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 999px; background: #eef1f8; color: #1d3a7a; border: 1px solid #c8d4ee; }
/* opsi harga ke Sales */
.offers { display: flex; flex-direction: column; gap: 3px; text-align: left; }
.offer { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 3px 6px; border: 1px solid var(--line); border-radius: 6px; background: #fff; font-size: 12px; }
.offer.main { border-color: #a9d3b1; background: #f1f8f2; }
@media (max-width: 760px) { .mc { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); } }

/* kepala halaman daftar (Tanya Harga, Antrian Purchasing): judul + ringkasan, tab berjumlah, filter aktif, petunjuk */
.ph-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-top: 4px; font-size: 13px; color: var(--ink-2); }
.ph-meta b { color: var(--ink); font-family: var(--f-mono); }
.ph-meta .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 5px; vertical-align: 1px; }
.ph-act { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-left: auto; }
.tabs-n .chip .tn { display: inline-flex; align-items: center; gap: 5px; margin-left: 6px; font-weight: 600; }
.tabs-n .chip .tn b { min-width: 22px; padding: 1px 7px; border-radius: 999px; background: var(--surface-2); color: var(--ink-2); font-family: var(--f-mono); font-size: 11.5px; text-align: center; }
.tabs-n .chip .tn span { font-size: 11.5px; color: var(--ink-3); }
.tabs-n .chip.on .tn b { background: var(--sl-act); color: #fff; }
.tabs-n .chip.on .tn span { color: var(--ink-2); }
.tabs-n .chip .tn.zero b { background: transparent; color: var(--ink-3); font-weight: 600; }
@media (max-width: 760px) {
  .chips.tabs-n { flex-wrap: nowrap; overflow-x: auto; gap: 18px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .chips.tabs-n::-webkit-scrollbar { display: none; }
  .chips.tabs-n .chip { flex: none; white-space: nowrap; }
}
.fbar { display: flex; flex-direction: column; gap: 8px; background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 10px; }
.fbar .toolbar { border: 0; padding: 0; }
.fbar .ubar { border: 0; padding: 0; }
.fsum { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-2); padding-top: 8px; border-top: 1px dashed var(--line); }
.fsum-l { font-weight: 600; }
.fsum-n { color: var(--ink); margin-right: 2px; }
.fpill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px 2px 10px; border-radius: 999px; background: var(--blue-bg); color: var(--blue-ink); border: 1px solid #c3d4f5; }
.fpill.fixed { padding-right: 10px; background: var(--surface-2); color: var(--ink-2); border-color: var(--line); }
.fpill button { border: 0; background: transparent; color: inherit; cursor: pointer; width: 20px; height: 20px; border-radius: 50%; font-size: 15px; line-height: 1; }
.fpill button:hover { background: #c3d4f5; }
details.help > summary { cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--ink-2); width: max-content; list-style: none; }
details.help > summary::-webkit-details-marker { display: none; }
details.help > summary:hover { color: var(--ink); }
details.help[open] > summary { margin-bottom: 6px; }
details.help > div { font-size: 12.5px; line-height: 1.5; color: var(--ink-2); background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; }
.empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 28px 16px; text-align: center; }
.empty > b { font-size: 15px; }
.qpic-txt { font-size: 12.5px; color: var(--ink-2); }

/* Inventory: judul + info tanggal data, tab Cek stok & harga | Register barcode */
.inv-h { display: flex; flex-direction: column; gap: 6px; }
.inv-t { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; }
.inv-t h2.title { display: inline-flex; align-items: center; gap: 8px; }
.inv-pane { display: flex; flex-direction: column; gap: 12px; }
.inv-pane[hidden] { display: none; }
.stamp { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-size: 12.5px; color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; padding: 2px 10px; }
.stamp b { color: var(--ink); font-family: var(--f-mono); }
.stamp.amber { background: var(--amber-bg); border-color: var(--amber-line); color: var(--amber-ink); }
.inv-meta { gap: 8px; align-items: center; }
.inv-sort { width: auto; max-width: 55%; }
.bc-hit { background: #fff2a8; color: var(--ink) !important; border-radius: 3px; padding: 0 3px; font-weight: 700; }
.pickbar { position: sticky; top: 0; z-index: 4; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; background: var(--blue-bg); border: 1px solid #b6cdf3; color: var(--blue-ink); border-radius: var(--r); padding: 10px 14px; }
.pickbar .grow { min-width: 0; flex: 1 1 220px; }
table.cat-t.cat-reg tbody tr.pickable { cursor: pointer; }
table.cat-t.cat-reg tbody tr.pickable:hover td { filter: none; background: var(--blue-bg) !important; }
table.cat-t td.c-act { text-align: center; vertical-align: middle; }
.bc-confirm { border: 1px solid var(--line); border-left: 4px solid var(--green); border-radius: 8px; padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; }
/* stok per gudang: kotak berwarna (warna tetap per gudang) */
.whs { display: flex; flex-wrap: wrap; gap: 4px; }
.wh { display: inline-flex; align-items: baseline; gap: 4px; border-radius: 6px; padding: 1px 7px; font-size: 12px; font-weight: 700; }
/* pola demand per toko (Inventory › Cek stok & harga) */
.dm-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 3px; }
.dm-tag { display: inline-flex; align-items: baseline; gap: 4px; border-radius: 999px; padding: 0 8px; font-size: 11.5px; font-weight: 600; line-height: 19px; white-space: nowrap; cursor: help; }
.dm-tag b { font-weight: 800; font-size: 10.5px; letter-spacing: .03em; }
.dm-list { display: flex; flex-direction: column; gap: 6px; }
.dm-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.dm-row .dm-tag { cursor: default; }
.dm-opt .dm-tag { cursor: pointer; margin-right: 4px; }
.wh b { font-size: 13.5px; font-variant-numeric: tabular-nums; }
/* harga di kartu HP: 2 kolom, tiap kolom Exc | Incl */
.mprices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 8px; border-top: 1px dashed var(--line); padding-top: 6px; font-size: 12.5px; }
.mprices .pcol { display: grid; grid-template-columns: auto 1fr 1fr; gap: 1px 5px; align-items: baseline; min-width: 0; }
.mprices .pcol + .pcol { border-left: 1px solid var(--line); padding-left: 8px; }
.mprices .pcol > :nth-child(3n+2), .mprices .pcol > :nth-child(3n) { text-align: right; }
.mprices .pcol .sub { font-size: 12px; white-space: nowrap; }
.mprices .phd { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); font-weight: 700; }
.mcards { flex-direction: column; gap: 8px; }
/* filter ringkas: judul kecil di atas, pilihan di bawah; ditekan -> pop up cari */
.inv-fr { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.fchips { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.fchip { display: inline-flex; align-items: stretch; border: 1px solid var(--line-2); border-radius: 8px; background: #fff; overflow: hidden; min-width: 0; }
.fchip:hover { background: var(--surface-2); }
.fchip button { border: 0; background: transparent; padding: 3px 10px; min-height: 38px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; text-align: left; min-width: 0; font: inherit; color: var(--ink); }
.fchip button:first-child { flex: 1; }
.fchip .fl { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; flex: 1; }
.fchip .fk { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.fchip .fv { font-size: 13.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 170px; }
.fchip .fcar { color: var(--ink-3); }
.fchip.on { background: var(--blue-bg); border-color: #9cb8ec; }
.fchip.on .fk { color: var(--blue); }
.fchip.on button { color: var(--blue-ink); }
.fchip .fx { padding: 0 9px 0 2px; }
.fpop-scrim { align-items: flex-start; }
.fpop { background: #fff; border-radius: 12px; width: min(440px, 100%); height: min(560px, 86vh); display: flex; flex-direction: column; gap: 10px; padding: 12px 14px 0; box-shadow: 0 16px 40px rgba(20,22,26,.25); }
.fpop-h { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 6px; }
.fpop-h h3 { margin: 0; font-size: 17px; text-align: center; }
.fpop .input { font-size: 16px; }
.flist { flex: 1; overflow-y: auto; margin: 0 -14px; border-top: 1px solid var(--line); }
.fopt { width: 100%; border: 0; border-bottom: 1px solid #f0f0ee; background: #fff; text-align: left; padding: 0 16px; min-height: 46px; display: flex; align-items: center; gap: 8px; cursor: pointer; font: inherit; font-size: 15px; color: var(--ink); }
.fopt:hover { background: var(--surface-2); }
.fopt > span:first-child { flex: 1; min-width: 0; }
.fopt.sel { font-weight: 800; color: var(--green-ink); }
.fopt mark { background: #fff2a8; color: inherit; border-radius: 2px; }
@media (max-width: 760px) {
  .inv-t { flex-wrap: nowrap; justify-content: space-between; }
  .inv-t .stamp { font-size: 11px; border-radius: 8px; padding: 3px 8px; gap: 5px; }
  .inv-t .st-txt { display: flex; flex-direction: column; line-height: 1.15; }
  .inv-t .st-txt b { font-size: 12px; }
  /* cari, lalu baris Scan·Brand·Category dan SubCategory·Class (tanpa geser); filter Stok tidak tampil di HP */
  .inv-tb .inv-fr { flex: 1 1 100%; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
  .inv-tb .inv-fr > .scanbtn, .inv-tb .fchips > .fchip { grid-column: span 2; min-height: 44px; justify-content: center; }
  .inv-tb .fchips > .fchip:nth-child(3), .inv-tb .fchips > .fchip:nth-child(4) { grid-column: span 3; }
  .inv-tb .fchips > .fstock { display: none; }
  .inv-tb .fchips { display: contents; }
  .fchip .fv { max-width: none; }
  .fpop-scrim { padding: 0; }
  .fpop { width: 100%; height: 100%; border-radius: 0; }
  .inv-pane .toolbar .seg { width: 100%; }
  .inv-pane .toolbar .seg button { flex: 1; padding: 2px 4px; font-size: 12.5px; line-height: 1.2; }
}

/* Inventory: kartu/baris bisa diketuk -> detail; harga kartu menyesuaikan panjang angka */
.mline.tap { cursor: pointer; }
.mline.tap:active { background: #eef3ff; }
.mchev { color: var(--ink-3); font-size: 20px; line-height: 1; }
table.cat-t tbody tr.tap { cursor: pointer; }
.mprices.sm { font-size: 11.5px; }
.mprices.sm .pcol .sub { font-size: 11px; }
.mprices.one { grid-template-columns: 1fr; font-size: 13.5px; }
.mprices.one .pcol { grid-template-columns: 1fr auto auto; column-gap: 14px; }
/* pop up detail item */
.modal.idet { width: min(720px, 100%); }
.modal.idet .modal-h { position: sticky; top: -16px; z-index: 3; background: #fff; margin: -16px -16px 0; padding: 14px 16px 10px; border-bottom: 1px solid var(--line); border-radius: 12px 12px 0 0; }
.idet-h { display: flex; flex-direction: column; gap: 2px; }
.idet-code { font-size: 20px; }
.idet-desc { font-size: 16px; text-wrap: pretty; }
.idet-sec h4 { margin: 0 0 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); }
.idet-sec h4 span { text-transform: none; letter-spacing: 0; font-weight: 400; }
.sgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px; }
.sbox { border-radius: 8px; padding: 6px 10px; display: flex; flex-direction: column; background: var(--surface-2); }
.sbox span { font-size: 11.5px; font-weight: 700; letter-spacing: .03em; }
.sbox b { font-size: 22px; line-height: 1.15; }
.sbox.wide { grid-column: span 2; }
.sbox.zero { color: var(--ink-3); }
.sbox.tot { background: var(--green-bg); color: var(--green-ink); }
.sbox.tot.z { background: var(--red-bg); color: var(--red-ink); }
.sbox.ins { background: #eef3fa; color: #1d3a7a; }
.plist { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.prow { display: grid; grid-template-columns: minmax(110px, 1fr) auto auto; column-gap: 24px; align-items: baseline; padding: 8px 12px; border-bottom: 1px solid var(--line); }
.prow:last-child { border-bottom: 0; }
.prow.h { background: var(--surface-2); padding: 5px 12px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-2); }
.prow > :not(:first-child) { text-align: right; white-space: nowrap; }
.prow .k { font-weight: 700; }
.prow .ex { font-size: 19px; font-weight: 700; }
.prow .in { font-size: 15px; color: var(--ink-2); }
.prow.cost { background: #fbf8f1; }
.hist { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.hrow { display: grid; grid-template-columns: 70px 1fr auto; gap: 2px 10px; padding: 7px 12px; border-bottom: 1px solid var(--line); font-size: 13px; align-items: baseline; }
.hrow:last-child { border-bottom: 0; }
.hrow .d { color: var(--ink-3); }
.idet-f { display: flex; justify-content: flex-end; gap: 8px; }
@media (max-width: 760px) {
  .modal.idet .modal-h { top: -12px; margin: -12px -12px 0; padding: 12px; border-radius: 0; }
  .sgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sbox b { font-size: 19px; }
  /* HP: tiap harga 2 baris — nama + Excl besar, Incl kecil di bawah */
  .prow { grid-template-columns: 1fr auto; column-gap: 10px; }
  .prow.h { display: none; }
  .prow .k { grid-row: span 2; align-self: center; }
  .prow .ex { font-size: 20px; }
  .prow .ex::before { content: "Excl "; font-size: 11px; font-weight: 400; color: var(--ink-3); }
  .prow .in { font-size: 13.5px; }
  .prow .in::before { content: "Incl "; font-size: 11px; color: var(--ink-3); }
  .hrow { grid-template-columns: 1fr auto; }
  .hrow .d { grid-column: 1 / -1; font-size: 12px; }
  .idet-f { position: sticky; bottom: -12px; background: #fff; padding: 10px 0; margin-top: auto; }
  .idet-f .btn { flex: 1; }
}

/* filter berlabel (Replenishment): judul kecil selalu tampil di atas kotak pilihan (.fbar di atas) */
.ffs { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px 10px; padding-top: 8px; border-top: 1px dashed var(--line); }
.ff { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ff-l { font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--ink-3); }
.ff .input { width: 100%; }
.ff.on .ff-l { color: var(--blue-ink); }
.ff.on .input { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue) inset; background: var(--blue-bg); font-weight: 600; }
.assign-menu .assign-h { position: sticky; top: -4px; background: #fff; z-index: 1; }
.assign-menu button.cancel { position: sticky; bottom: -4px; background: #fff; }

/* server testing (GMP_ENV=test) */
body.env-test { --sl-top: #7c2d12; --sl-side: #9a3412; --sl-hover: #b45309; --sl-side-line: #c2410c; }
body.env-test::after { content: "SERVER TESTING · bukan data asli"; position: fixed; left: 50%; bottom: 10px; transform: translateX(-50%); z-index: 100000; pointer-events: none; padding: 4px 14px; border-radius: 999px; background: #d97706; color: #fff; font-size: 12px; font-weight: 800; letter-spacing: .3px; box-shadow: 0 2px 8px rgba(0,0,0,.25); }

/* keterangan singkatan gudang (Inventory) */
.wh-legend { display: flex; flex-wrap: wrap; gap: 4px 22px; margin: 0 0 10px; font-size: 12.5px; color: var(--ink-2, #44546f); }
.wh-lg-pt { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.wh-lg-pt > b { font-weight: 600; color: var(--ink, #1d2125); }
.wh-lg-i { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.wh-lg-i .wh { font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 4px; }
.op-log td { vertical-align: top; } .op-log .nowrap { white-space: nowrap; }
.joblog { margin: 0; max-height: 45vh; overflow: auto; background: var(--surface-2); border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; font: 12px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; word-break: break-word; }
/* pilihan database LIVE / TESTING (login & sidebar) */
.dbsw { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.dbsw-b { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 8px 6px; border: 1.5px solid var(--line); border-radius: 8px; color: var(--ink-2); font-weight: 800; text-decoration: none; letter-spacing: .3px; }
.dbsw-b small { font-weight: 500; font-size: 11px; color: var(--ink-3); letter-spacing: 0; }
.dbsw-b[href] { cursor: pointer; }
.dbsw-b[href]:hover { border-color: var(--ink-3); }
.dbsw-b.on { border-color: #1f845a; background: #e5f4e4; color: #164b35; }
.dbsw-b.test.on { border-color: #d97706; background: #fdf3e2; color: #6b3a00; }
.sb-db { display: flex; align-items: center; gap: 8px; margin: 0 12px 8px; padding: 6px 10px; border: 1px solid var(--sl-side-line); border-radius: 8px; color: var(--sl-side-ink); font-size: 12px; text-decoration: none; }
.sb-db:hover { background: var(--sl-hover); color: #fff; }
.sb-dbnow { padding: 1px 6px; border-radius: 4px; background: #1f845a; color: #fff; font-weight: 800; font-size: 10px; letter-spacing: .3px; }
.sb-db.test .sb-dbnow { background: #d97706; }