/* 📦 Karton otomatis (din-carton.js, docs/DIN_CARTON_AUTODEDUCT.md "Layar Karton per produk"). Phone first: no sideways scroll at 360px,
   every tap target >= 44px, numbers big and tabular. Severity colours only where they mean something (lesson
   warning-colors-only-for-warnings): red = Belum diatur (nothing is deducted, somebody must act) and errors, orange = a shortfall,
   green = saved / on. Everything else stays neutral.
   The sheet scrolls in its own box (.dcn-body) with overflow-anchor:none: din-carton.js keeps the row being read in place itself
   (dcnKeep), the same on Chromium and on iOS Safari (which has no scroll anchoring). */
.dcn-entry { display: flex; align-items: center; gap: .6rem; width: 100%; min-height: 56px; margin: 0 0 .6rem; padding: .5rem .8rem; box-sizing: border-box; border: 1.5px solid #C7D2FE; border-radius: 12px; background: #fff; color: var(--s); font: inherit; font-weight: 800; font-size: 1rem; text-align: left; cursor: pointer; box-shadow: var(--sh-sm); }
.dcn-entry span:nth-child(2) { flex: 1; min-width: 0; }
.dcn-entry-ic { font-size: 1.4rem; }

.dcn-ov { position: fixed; inset: 0; z-index: 150; display: flex; justify-content: center; background: rgba(16, 24, 40, .45); }
.dcn-sheet { display: flex; flex-direction: column; width: 100%; max-width: 720px; height: 100%; background: #EEF1F4; min-width: 0; }
.dcn-bar { display: flex; align-items: center; gap: .4rem; flex: 0 0 auto; padding: .35rem .5rem; padding-top: calc(.35rem + env(safe-area-inset-top)); background: #fff; border-bottom: 1px solid var(--border); }
.dcn-back { min-height: 44px; padding: .3rem .7rem; border: 1px solid var(--border-input); border-radius: 10px; background: #fff; color: var(--dark); font: inherit; font-weight: 800; font-size: .95rem; cursor: pointer; white-space: nowrap; }
.dcn-title { flex: 1; min-width: 0; font-weight: 800; font-size: 1rem; color: var(--dark); overflow-wrap: anywhere; }
.dcn { padding: .5rem .55rem 1.2rem; min-width: 0; overflow-anchor: none; }
.dcn-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding-bottom: calc(1.2rem + env(safe-area-inset-bottom)); }
.dcn-body[data-view="map"] #dcn-v-rep { display: none; }
.dcn-body[data-view="rep"] #dcn-v-map { display: none; }
.dcn-body[data-view="rep"] #dcn-meta { display: none; }

.dcn-seg { display: grid; grid-template-columns: 1fr 1fr; gap: .3rem; margin: 0 0 .45rem; }
.dcn-segb { min-height: 48px; border: 1px solid var(--border-input); border-radius: 10px; background: #fff; color: var(--dark); font: inherit; font-weight: 800; font-size: .95rem; cursor: pointer; }
.dcn-segb.on { background: var(--p); border-color: var(--p); color: #fff; }
.dcn-meta { font-size: .82rem; color: var(--ink2); margin: 0 .2rem .3rem; line-height: 1.5; overflow-wrap: anywhere; }
.dcn-quiet { font-size: .84rem; color: var(--muted); }
.dcn-pad { padding: .6rem .2rem; }
.dcn-link { min-height: 44px; padding: 0 .3rem; border: none; background: none; color: var(--p); font: inherit; font-weight: 700; font-size: .84rem; text-decoration: underline; cursor: pointer; }
.dcn-note { font-size: .85rem; border-radius: 10px; padding: .5rem .65rem; margin: .4rem 0; overflow-wrap: anywhere; line-height: 1.4; }
.dcn-note-d { background: #FEF2F2; color: #991B1B; border-left: 4px solid var(--danger); }
.dcn-note-w { background: #FFFBEB; color: #92400E; border-left: 4px solid var(--warn); }
.dcn-note-i { background: var(--light); color: var(--ink2); border-left: 4px solid var(--border-input); }

.dcn-btn { min-height: 48px; padding: .45rem .9rem; border: none; border-radius: 10px; background: var(--p); color: #fff; font: inherit; font-weight: 800; font-size: .95rem; cursor: pointer; }
.dcn-btn:disabled { background: #C7CBD6; color: #fff; cursor: default; }
.dcn-btn2 { min-height: 44px; padding: .3rem .8rem; border: 1px solid var(--border-input); border-radius: 10px; background: #fff; color: var(--dark); font: inherit; font-weight: 700; font-size: .9rem; cursor: pointer; }
.dcn-btn2:disabled { color: var(--muted); cursor: default; }
.dcn-card { padding: .6rem .7rem; margin: 0 0 .5rem; border: 1px solid var(--border); border-radius: 12px; background: #fff; box-shadow: var(--sh-sm); min-width: 0; }

.dcn-go-t { font-weight: 800; font-size: 1rem; color: var(--dark); margin-bottom: .2rem; overflow-wrap: anywhere; }
.dcn-go-on { color: #05603A; }
.dcn-btn-go { display: block; width: 100%; margin-top: .5rem; }
.dcn-go-ro { margin-top: .3rem; }
.dcn-err { font-size: .86rem; font-weight: 700; color: #B42318; margin-top: .3rem; overflow-wrap: anywhere; }
.dcn-err:empty, .dcn-okmsg:empty, .dcn-echo:empty { display: none; }
.dcn-okmsg { font-size: .86rem; font-weight: 700; color: #05603A; margin-top: .3rem; overflow-wrap: anywhere; }

.dcn-q input { width: 100%; min-height: 48px; box-sizing: border-box; padding: 0 .7rem; border: 1px solid var(--border-input); border-radius: 10px; background: #fff; font: inherit; font-size: 16px; }
.dcn-chips { display: grid; grid-template-columns: 1fr 1fr; gap: .3rem; margin: .4rem 0; }
.dcn-chip { min-height: 44px; padding: .2rem .4rem; border: 1px solid var(--border-input); border-radius: 10px; background: #fff; color: var(--dark); font: inherit; font-weight: 700; font-size: .86rem; cursor: pointer; }
.dcn-chip.on { background: var(--p); border-color: var(--p); color: #fff; }
.dcn-chip-r:not(.on) { color: #B42318; border-color: #FCA5A5; }

.dcn-p { padding: .55rem .65rem; margin: 0 0 .4rem; border: 1px solid var(--border); border-radius: 12px; background: #fff; min-width: 0; }
.dcn-p-belum { border-color: #FCA5A5; }
.dcn-p-off { opacity: .6; }
.dcn-p1 { display: flex; justify-content: space-between; align-items: flex-start; gap: .5rem; }
.dcn-pn { min-width: 0; font-size: .95rem; overflow-wrap: anywhere; }
.dcn-pname { display: block; font-size: .8rem; color: var(--ink2); font-weight: 400; overflow-wrap: anywhere; }
.dcn-kg { flex: 0 0 auto; font-size: .9rem; font-weight: 800; color: var(--dark); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dcn-how { margin-top: .25rem; font-size: .92rem; font-weight: 700; color: var(--dark); overflow-wrap: anywhere; }
.dcn-how-belum { color: #B42318; }
.dcn-how-drum, .dcn-how-tanpa { color: var(--ink2); }
.dcn-sub { font-size: .8rem; color: #B42318; margin-top: .1rem; }
.dcn-tag { display: inline-block; font-size: .68rem; font-weight: 800; border-radius: 6px; padding: .02rem .35rem; border: 1px solid #CBD5E1; background: #F1F5F9; color: #334155; vertical-align: middle; }
.dcn-tag-r { border-color: #FCA5A5; background: #FEF2F2; color: #991B1B; }
.dcn-edit-btn { margin-top: .4rem; }

.dcn-ed { margin-top: .5rem; padding: .55rem .6rem; border: 1px solid var(--border-input); border-radius: 12px; background: var(--light); }
.dcn-ed-t { font-weight: 800; font-size: .9rem; color: var(--dark); margin-bottom: .2rem; }
.dcn-opt { display: flex; align-items: flex-start; gap: .55rem; min-height: 48px; padding: .4rem .2rem; cursor: pointer; font-size: .92rem; }
.dcn-opt input { flex: 0 0 auto; width: 22px; height: 22px; margin: .15rem 0 0; }
.dcn-opt span { min-width: 0; overflow-wrap: anywhere; }
.dcn-opt small { display: block; font-size: .78rem; color: var(--muted); font-weight: 400; }
.dcn-man { margin: .2rem 0 .3rem; padding-left: .2rem; }
.dcn-man[hidden] { display: none; }
.dcn-fl { display: block; font-size: .84rem; font-weight: 800; color: var(--dark); margin: .4rem 0 .2rem; }
.dcn-man select, .dcn-man input { width: 100%; min-height: 48px; box-sizing: border-box; padding: 0 .6rem; border: 1px solid var(--border-input); border-radius: 10px; background: #fff; font: inherit; font-size: 16px; }
.dcn-man input { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; max-width: 8rem; }
.dcn-hint { font-size: .78rem; color: var(--muted); margin-top: .3rem; line-height: 1.35; overflow-wrap: anywhere; }
.dcn-echo { font-size: .9rem; font-weight: 700; color: var(--ink2); margin-top: .25rem; }
.dcn-echo-bad { color: #B42318; }
.dcn-ed-act { display: flex; gap: .4rem; margin-top: .5rem; }
.dcn-ed-act .dcn-btn { flex: 1; }

.dcn-rc { padding: .55rem .65rem; margin-bottom: .5rem; border: 1px solid var(--border); border-radius: 12px; background: #fff; }
.dcn-rc-row { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; margin-bottom: .5rem; }
.dcn-rl { display: block; min-width: 0; font-size: .82rem; font-weight: 800; color: var(--dark); }
.dcn-rl input { display: block; width: 100%; min-width: 0; min-height: 48px; box-sizing: border-box; margin-top: .2rem; padding: 0 .4rem; border: 1px solid var(--border-input); border-radius: 10px; background: #fff; font: inherit; font-size: 16px; }
.dcn-rc .dcn-btn { width: 100%; }
.dcn-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; margin: .4rem 0; }
.dcn-tile { padding: .5rem .6rem; border: 1px solid var(--border); border-radius: 12px; background: #fff; min-width: 0; }
.dcn-tile span { display: block; font-size: .78rem; color: var(--ink2); font-weight: 700; }
.dcn-tile b { display: block; font-size: 1.5rem; font-variant-numeric: tabular-nums; line-height: 1.2; color: var(--dark); overflow-wrap: anywhere; }
.dcn-tile-w { border-color: var(--warn); background: #FFFBEB; }
.dcn-tile-w b { color: #92400E; }
.dcn-sweep-t { font-weight: 800; font-size: .95rem; color: var(--dark); margin-bottom: .4rem; }
.dcn-sweep .dcn-btn { width: 100%; }
.dcn-belum { border-color: #FCA5A5; background: #FEF2F2; }
.dcn-belum-t { font-weight: 800; font-size: .9rem; color: #991B1B; margin-bottom: .3rem; }
.dcn-belum-r { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .2rem 0; font-size: .9rem; }
.dcn-belum-r span { min-width: 0; overflow-wrap: anywhere; }
.dcn-day { font-size: .82rem; font-weight: 800; color: var(--ink2); margin: .7rem .2rem .25rem; }
.dcn-row { padding: .5rem .65rem; margin-bottom: .35rem; border: 1px solid var(--border); border-radius: 12px; background: #fff; min-width: 0; }
.dcn-row-w { border-color: var(--warn); background: #FFFBEB; }
.dcn-row1 { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem; font-size: .95rem; }
.dcn-rn { margin-left: auto; font-size: .78rem; color: var(--muted); }
.dcn-nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .3rem; margin-top: .3rem; font-size: .84rem; color: var(--ink2); }
.dcn-nums b { display: block; font-size: 1.15rem; color: var(--dark); font-variant-numeric: tabular-nums; }
.dcn-nums .dcn-short, .dcn-nums .dcn-short b { color: #B54708; font-weight: 800; }

.dcn-rec { display: block; margin-top: .3rem; font-size: .8rem; font-weight: 700; color: var(--ink2); text-align: left; overflow-wrap: anywhere; }
.dcn-rec-d { padding: .45rem 0; border-bottom: 1px solid #F3F4F6; font-size: .88rem; }
.dcn-rec-short { color: #B54708; }
.dcn-rec-belum { color: #B42318; }
.dcn-rec-pending { color: var(--muted); font-weight: 600; }

.dcn-banner { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(140px + env(safe-area-inset-bottom)); z-index: 160; display: flex; align-items: center; gap: .5rem; box-sizing: border-box; width: calc(100% - 1.2rem); max-width: 480px; padding: .45rem .5rem .45rem .8rem; border-radius: 14px; background: var(--dark); color: #fff; box-shadow: 0 6px 22px rgba(0, 0, 0, .3); }
.dcn-ban-ic { font-size: 1.3rem; }
.dcn-ban-t { flex: 1; min-width: 0; font-size: .95rem; font-weight: 800; line-height: 1.35; overflow-wrap: anywhere; }
.dcn-ban-t .dcn-rec-used { display: block; }
.dcn-ban-t .dcn-rec-short, .dcn-ban-t .dcn-rec-belum { display: block; color: #FDBA74; }
.dcn-ban-t .dcn-rec-pending { display: block; color: #CBD5E1; }
.dcn-ban-x { flex: 0 0 auto; min-width: 44px; min-height: 44px; border: none; background: none; color: #fff; font-size: 1.1rem; cursor: pointer; }

/* "Karton default" sheet: one plain line at the top says what the screen is for (owner 2026-10-25: "Karton per produk" was not clear). */
.dcn-intro { font-size: .88rem; color: var(--ink2); line-height: 1.4; margin: 0 .2rem .5rem; overflow-wrap: anywhere; }
.dcn-rec-ovfail { color: #B42318; }
.dcn-ban-t .dcn-rec-ovfail { display: block; color: #FDBA74; }
.dcn-ban-retry { flex: 0 0 auto; min-height: 44px; padding: .2rem .7rem; border: 1px solid #fff; border-radius: 10px; background: none; color: #fff; font: inherit; font-weight: 800; font-size: .88rem; cursor: pointer; }
.dcn-ban-retry:disabled { opacity: .6; cursor: default; }

/* 📦 Karton for ONE production record (carton-pick.js): under the chosen product in "Catat Hasil Produksi" and in the edit sheet.
   Neutral card; red text only for "Karton belum diatur" (somebody should choose). Tap targets >= 48px, 16px+ text in the boxes. */
.cpk { margin: .5rem 0 .6rem; padding: .55rem .65rem; border: 1px solid var(--border); border-radius: 12px; background: #fff; min-width: 0; }
.cpk[hidden] { display: none; }
.cpk-line { font-weight: 800; font-size: .95rem; color: var(--dark); line-height: 1.35; overflow-wrap: anywhere; }
.cpk-ov { font-weight: 700; font-size: .88rem; color: var(--ink2); margin-top: .15rem; }
.cpk-belum { color: #B42318; }
.cpk-fl { display: block; font-size: .84rem; font-weight: 800; color: var(--dark); margin: .45rem 0 .2rem; }
.cpk select, .cpk input { display: block; width: 100%; min-height: 48px; box-sizing: border-box; padding: 0 .6rem; border: 1px solid var(--border-input); border-radius: 10px; background: #fff; color: var(--dark); font: inherit; font-size: 16px; }
.cpk input { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; max-width: 8rem; }
.cpk-cnt[hidden] { display: none; }
.cpk-hint { font-size: .82rem; color: var(--ink2); margin-top: .3rem; line-height: 1.35; overflow-wrap: anywhere; }
.cpk-hint:empty { display: none; }
.cpk-ll { font-size: .8rem; font-weight: 700; color: var(--ink2); margin-top: .2rem; overflow-wrap: anywhere; }