/* Produksi tab, density pass (owner 2026-10-25): Riwayat Produksi as compact cards on a phone and as table rows on a wide screen,
   one filter row, slim summary cards. Layout only: same fields, same click-to-open detail, same gates (see prodHistCardHTML in index.html).
   Default = phone/tablet card; the table switches on by the WIDTH OF THE LIST (container query), not the viewport, because the
   desktop sidebar takes 180px: a 1000px window has a ~650px list and keeps the card. */

/* ── slim summary cards: "Cek Kejanggalan" (collapsed), "Produksi Hari Ini" ── */
.prd-slim { margin: .4rem .5rem; padding: .35rem .65rem; border-radius: 12px; }
.prd-slim > .card-title { margin: 0; min-height: 44px; display: flex; align-items: center; font-size: .92rem; }
.prd-slim > .card-title + div { margin-top: .3rem; }
.prd-slim > .prd-total { margin-top: .15rem !important; padding-bottom: .15rem; }

/* ── Riwayat Produksi card ── */
.prd-card { margin: .4rem .5rem; padding: .5rem .6rem .6rem; border-radius: 12px; }
.prd-card > .card-title { margin: 0 0 .3rem; font-size: .95rem; }
.prd-filters { display: flex; gap: .35rem; align-items: center; margin-bottom: .4rem; }
.prd-filters input { margin: 0; box-sizing: border-box; min-width: 0; }
.prd-filters #prod-q { flex: 1 1 0; }
.prd-filters #prod-date { flex: 0 0 9.6rem; width: 9.6rem; }
.prd-filters .prd-clear { flex: 0 0 auto; margin: 0; min-height: 44px; padding: .2rem .6rem; font-size: .78rem; white-space: nowrap; }
@media (min-width: 1100px) {
  .prd-card { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 1rem; align-items: center; }
  .prd-card > .card-title { margin: 0 0 .3rem; }
  .prd-card > .prd-filters { margin-bottom: .3rem; }
  .prd-card > #prod-list-wrap { grid-column: 1 / -1; }
  .prd-filters #prod-q { max-width: 36rem; }
  .prd-filters #prod-date { flex-basis: 11rem; width: 11rem; }
}

/* ── one record = compact card ── */
#prod-list-wrap { container: prd / inline-size; --prd-act: 5.9rem;
  --prd-cols: 3.2rem minmax(5.6rem, 7rem) minmax(0, 3fr) minmax(0, 1.4fr) minmax(9.4rem, 10.6rem) minmax(4.6rem, .9fr) minmax(5.8rem, 1fr) 2.6rem .9rem; }
.prd-thead { display: none; }
.prd-list { gap: .3rem; }
.prd-item { display: block; min-width: 0; }
.prd-acts { display: none; }
.prd-row { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: .1rem; align-items: center; position: relative;
  box-sizing: border-box; min-height: 44px; margin: 0; padding: .3rem 1.5rem .3rem .55rem; border-radius: 10px; }
.prd-top { display: flex; align-items: center; flex-wrap: wrap; gap: .1rem .4rem; min-width: 0; }
.prd-row .prd-code { font-size: .86rem; padding: .03rem .4rem; border-radius: 6px; overflow-wrap: anywhere; }
.prd-row .prd-date { font-size: .76rem; }
.prd-row .prd-qty { margin-left: auto; font-size: .8rem; padding: .05rem .4rem; white-space: normal; font-variant-numeric: tabular-nums; }
.prd-row .prd-name { display: block; margin: 0; font-size: .88rem; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.prd-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .15rem .3rem; min-width: 0; }
.prd-meta:empty { display: none; }
.prd-meta .ship-tag { font-size: .74rem; padding: .06rem .35rem; border-radius: 6px; white-space: normal; overflow-wrap: anywhere; }
.prd-flags, .prd-lock { display: contents; }
.prd-row .ship-more { position: absolute; right: .5rem; top: 50%; transform: translateY(-50%); margin: 0; }
.prd-row .dcn-rec { margin-top: .05rem; font-size: .76rem; }
.prd-ic { font-style: normal; }

/* ── wide list: table rows, columns aligned with the sticky header, numbers right-aligned ── */
@container prd (min-width: 940px) {
  .prd-thead { display: grid; grid-template-columns: minmax(0, 1fr) var(--prd-act); position: sticky; top: 0; z-index: 4;
    background: #EEF2F7; border: 1px solid var(--border); border-radius: 8px 8px 0 0; font-size: .74rem; font-weight: 800; color: var(--ink2); letter-spacing: .02em; text-transform: uppercase; }
  .prd-th { display: grid; grid-template-columns: var(--prd-cols); column-gap: .5rem; align-items: center; padding: .3rem .6rem; min-width: 0; }
  .prd-th > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .prd-th > .prd-th-r { text-align: right; }
  .prd-list { gap: 0; border: 1px solid var(--border); border-top: 0; border-radius: 0 0 8px 8px; }
  .prd-item { display: grid; grid-template-columns: minmax(0, 1fr) var(--prd-act); align-items: center; border-bottom: 1px solid #EEF1F5; background: #fff; }
  .prd-item:last-child { border-bottom: 0; border-radius: 0 0 8px 8px; }
  .prd-item:hover { background: #F6F8FF; }
  .prd-row { grid-template-columns: var(--prd-cols); column-gap: .5rem; row-gap: 0; min-height: 48px; padding: .15rem .6rem; border: 0; border-radius: 0; background: transparent; }
  .prd-row:active { background: #EEF2FF; }
  .prd-top, .prd-meta { display: contents; }
  .prd-row > *, .prd-top > *, .prd-meta > * { grid-row: 1; min-width: 0; }
  .prd-row .prd-date { grid-column: 1; font-size: .84rem; font-variant-numeric: tabular-nums; }
  .prd-row .prd-code { grid-column: 2; justify-self: start; font-size: .86rem; }
  .prd-row .prd-name { grid-column: 3; font-size: .9rem; }
  .prd-row .prd-cust { grid-column: 4; }
  .prd-row .prd-qty { grid-column: 5; justify-self: end; margin: 0; text-align: right; font-size: .88rem; padding: .12rem .5rem; white-space: nowrap; }
  .prd-row .prd-staff { grid-column: 6; }
  .prd-row .prd-batch { grid-column: 7; }
  .prd-row .prd-flags { grid-column: 8; display: flex; flex-wrap: wrap; gap: .2rem; align-items: center; }
  .prd-row .ship-more { grid-column: 9; position: static; transform: none; justify-self: end; }
  .prd-row .dcn-rec { grid-row: 2; grid-column: 3 / 8; margin: 0 0 .15rem; }
  .prd-meta .ship-tag.prd-cust, .prd-meta .ship-tag.prd-staff, .prd-meta .ship-tag.prd-batch { background: none; padding: 0; font-size: .86rem; color: var(--ink2); }
  .prd-ic { display: none; }
  .prd-row .prd-lock { display: flex; flex-wrap: wrap; gap: .2rem; grid-row: 3; grid-column: 3 / 8; margin: 0 0 .15rem; }
  .prd-row .prd-lock:empty { display: none; }
  .prd-row .prd-cust, .prd-row .prd-staff, .prd-row .prd-batch { overflow-wrap: break-word; }
  .prd-acts { display: flex; justify-content: flex-end; align-items: center; gap: .2rem; padding-right: .4rem; }
  .prd-act { min-width: 44px; min-height: 44px; padding: 0; border: 1px solid #CBD5E1; border-radius: 8px; background: #fff; font-size: 1rem; line-height: 1; cursor: pointer; }
  .prd-act:hover { background: #F1F5F9; }
  .prd-act:focus-visible { outline: 3px solid #4F46E5; outline-offset: 2px; }
}

/* ── Catat Hasil Produksi (SJA): cartons under Box / Eceran (owner 2026-10-29), "= 25 KG · 2.1 ctn" (sjaCtnLine in index.html) ── */
.sp-ctnline { margin: .4rem 0 0; font-size: 1rem; font-weight: 800; color: var(--dark, #101828); font-variant-numeric: tabular-nums; }
.sp-ctnline:empty { display: none; }
.sp-ctnline .sp-ctn-none { font-size: .82rem; font-weight: 600; color: var(--muted, #667085); }