/* Production queue: readable on the shop floor, compact on desktop, touch-safe everywhere. */
.fg-production-entry,
.fg-production-list {
  /* auto, not 100%: these are .card blocks with a side margin, and width:100% + margin pushed
     the card ~11px past a 360px screen (the "Periksa & simpan" edge was cut off). */
  width: auto;
  max-width: none;
  min-width: 0;
  box-sizing: border-box;
}

.fg-production-entry .fg-touch-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.fg-production-entry [hidden] { display: none !important; }

.fg-production-entry .fg-touch-details {
  width: 100%;
  min-width: 0;
  max-width: none;
  margin-top: .8rem;
  padding: 1rem;
  border: 1px solid #DCE2EB;
  border-radius: 12px;
  background: #FAFBFD;
}

.fg-production-entry .fg-production-product,
.fg-production-line-product {
  min-width: 0;
  overflow-wrap: anywhere;
}

.fg-production-entry .fg-touch-name,
.fg-production-line-name {
  font-size: 1rem;
  line-height: 1.35;
  font-weight: 750;
  white-space: normal;
  overflow-wrap: anywhere;
}

.fg-production-entry .fg-touch-spec,
.fg-production-line-spec {
  font-size: .875rem;
  line-height: 1.4;
  white-space: normal;
  overflow-wrap: anywhere;
}

.fg-production-entry .fg-touch-code,
.fg-production-line-code {
  font-size: .8rem;
  color: var(--muted);
  white-space: normal;
  overflow-wrap: anywhere;
}

.fg-production-list .fg-production-lines {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .6rem;
}

.fg-production-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: .65rem;
  min-width: 0;
  padding: .75rem;
  border: 1px solid #DCE2EB;
  border-radius: 8px;
  background: #fff;
}

.fg-production-line-main { min-width: 0; }
.fg-production-quantity { font-weight: 800; font-size: 1rem; margin-top: .3rem; }
.fg-production-line-meta { margin-top: .2rem; color: var(--muted); font-size: .8rem; line-height: 1.4; overflow-wrap: anywhere; }

.fg-production-line-quantity {
  min-width: 5rem;
  text-align: right;
  font-size: 1rem;
  font-weight: 800;
  white-space: nowrap;
}

.fg-production-line-actions {
  display: flex;
  align-items: center;
  gap: .4rem;
}

.fg-production-line-edit,
.fg-production-line-remove,
.fg-production-list button,
#fg-review-din,
#fg-review-sja {
  min-height: 44px;
  border-radius: 6px;
}

.fg-production-line-edit,
.fg-production-line-remove {
  min-width: 44px;
  padding: .45rem .65rem;
  border: 1px solid #CBD5E1;
  background: #fff;
  color: var(--ink2);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.fg-production-line-remove { color: #B42318; }

.fg-production-line-edit:focus-visible,
.fg-production-line-remove:focus-visible,
.fg-production-list button:focus-visible {
  outline: 3px solid #4F46E5;
  outline-offset: 2px;
}

.fg-production-list .fg-production-list-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: .8rem;
}

.fg-production-list .fg-production-list-empty {
  padding: 1rem;
  color: var(--muted);
  text-align: center;
}

.fg-production-list [data-state="uncertain"],
.fg-production-list .fg-production-uncertain {
  border-left: 4px solid #B45309;
  background: #FFFBEB;
}

.fg-production-review .fg-production-line {
  grid-template-columns: minmax(0, 1fr) auto;
}

.fg-production-review .fg-production-line-quantity {
  min-width: 0;
}

@media (max-width: 600px) {
  .fg-production-entry .fg-touch-details { padding: .8rem; }
  .fg-production-line {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .45rem .6rem;
  }
  .fg-production-line-product { grid-column: 1; grid-row: 1; }
  .fg-production-line-quantity { grid-column: 1; grid-row: 2; text-align: left; }
  .fg-production-line-actions { grid-column: 2; grid-row: 1 / span 2; flex-direction: column; }
  .fg-production-line-edit,
  .fg-production-line-remove { min-width: 48px; min-height: 48px; }
  /* one full-width column: the desktop justify-content:flex-end otherwise shrinks the grid track to the
     button's text, so "Periksa & simpan" stayed a small right-hand button on phones */
  .fg-production-list .fg-production-list-actions { display: grid; grid-template-columns: minmax(0, 1fr); justify-content: stretch; }
  .fg-production-list .fg-production-list-actions button { width: 100%; min-height: 50px; }
}

@media (min-width: 1024px) {
  .fg-production-entry .fg-touch-details .fr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
  .fg-production-entry .fg-touch-details .fr .ig { min-width: 0; }
  .fg-production-list .fg-production-lines { gap: .35rem; }
  .fg-production-line { padding: .55rem .75rem; }
}

/* ── Rusak (Rework 第 1 段): optional damaged quantity on a production line ── */
.fg-rusak-entry { margin-top: .4rem; padding-top: .55rem; border-top: 1px dashed var(--border-input); min-width: 0; }
.fg-rusak-entry [hidden] { display: none !important; }
.fg-rusak-entry .fg-rusak-qty input { max-width: 12rem; }
.fg-rusak-opt { font-weight: 400; color: var(--muted); }
.fg-rusak-req { font-weight: 700; color: var(--danger); }
.fg-rusak-unit { font-weight: 400; color: var(--muted); }
.fg-rusak-why { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; min-width: 0; }
.fg-rusak-why select, .fg-rusak-why input { min-height: 44px; width: 100%; }
.fg-rusak-hint { margin: .1rem 0 .3rem; font-size: .8rem; color: var(--ink2); }
.fg-production-line-rusak { margin-top: .25rem; font-size: .82rem; font-weight: 700; color: var(--ink2); overflow-wrap: anywhere; }
.fg-production-line-rusak::before { content: "♻️ "; }

.fg-rusak-bar:empty { display: none; }
.fg-rusak-bar { display: grid; gap: .4rem; margin: .1rem 0 .5rem; }
.fg-rusak-banner { padding: .55rem .7rem; border-radius: 10px; font-size: .85rem; line-height: 1.4; overflow-wrap: anywhere; }
.fg-rusak-banner-ok { background: #ECFDF5; color: #065F46; }
.fg-rusak-banner-wait { background: var(--light); color: var(--ink2); border: 1px solid var(--border); }
.fg-rusak-banner-bad { background: #FEF3F2; color: #912018; border: 1px solid #FECDCA; }
.fg-rusak-banner-rows { margin-top: .3rem; font-size: .8rem; color: var(--ink2); }
.fg-rusak-banner-msg { margin-top: .25rem; font-size: .78rem; }
.fg-rusak-banner-actions { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .45rem; }
.fg-rusak-banner-actions .btn { min-height: 48px; flex: 1 1 8rem; }
.fg-rusak-count {
  display: flex; align-items: center; flex-wrap: wrap; gap: .35rem; width: 100%; min-height: 44px;
  padding: .4rem .7rem; border: 1px solid var(--border-input); border-radius: 10px; background: #fff;
  color: var(--dark); font: inherit; font-size: .88rem; text-align: left; cursor: pointer;
}
.fg-rusak-count-late { border-color: #FECDCA; }
.fg-rusak-late-mark { color: var(--danger); font-weight: 800; font-size: .8rem; }

/* ── Rusak & Rework list (modal on the production screen, QC tab "Rusak") ── */
.fg-rusak-view { min-width: 0; }
.fg-rusak-sub { margin: 0 0 .5rem; font-size: .82rem; color: var(--ink2); }
.fg-rusak-seg { display: grid; grid-template-columns: 1fr 1fr; gap: .35rem; margin-bottom: .55rem; }
.fg-rusak-seg-btn {
  min-height: 44px; padding: .35rem .4rem; border: 1px solid var(--border-input); border-radius: 9px;
  background: #fff; color: var(--ink2); font: inherit; font-size: .84rem; font-weight: 700; cursor: pointer;
}
.fg-rusak-seg-btn.act { background: var(--p); border-color: var(--p); color: #fff; }
.fg-rusak-list { display: grid; gap: .45rem; }
.fg-rusak-case { padding: .55rem .65rem; border: 1px solid var(--border); border-radius: 10px; background: #fff; min-width: 0; }
.fg-rusak-case-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem; align-items: start; }
.fg-rusak-case-main { min-width: 0; overflow-wrap: anywhere; }
.fg-rusak-name { font-size: .95rem; line-height: 1.3; }
.fg-rusak-code { color: var(--muted); font-size: .76rem; }
.fg-rusak-meta { margin-top: .15rem; font-size: .78rem; color: var(--ink2); line-height: 1.4; }
.fg-rusak-note { margin-top: .15rem; font-size: .78rem; color: var(--ink2); }
.fg-rusak-case-side { display: grid; justify-items: end; gap: .2rem; text-align: right; }
.fg-rusak-qty-val { font-weight: 800; font-size: .98rem; white-space: nowrap; }
.fg-rusak-age { font-size: .76rem; color: var(--muted); white-space: nowrap; }
.fg-rusak-age-late { color: #fff; background: var(--danger); border-radius: 999px; padding: .08rem .45rem; font-weight: 800; }
.fg-rusak-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .35rem; margin-top: .5rem; }
.fg-rusak-btn {
  min-height: 48px; padding: .3rem .25rem; border: 1.5px solid var(--border-input); border-radius: 9px; background: #fff;
  font: inherit; font-size: .84rem; font-weight: 800; cursor: pointer; overflow-wrap: anywhere;
}
.fg-rusak-btn-buang { color: #B42318; }
.fg-rusak-btn-pakai { color: var(--ok); }
.fg-rusak-btn-rework { color: var(--p); }
.fg-rusak-confirm { margin-top: .5rem; padding: .6rem; border-radius: 10px; background: var(--light); border: 1.5px solid var(--border-input); }
.fg-rusak-confirm-buang { border-color: #FECDCA; background: #FEF3F2; }
.fg-rusak-confirm-text { margin: 0 0 .5rem; font-size: .92rem; font-weight: 700; line-height: 1.4; color: var(--dark); }
.fg-rusak-confirm-err { margin: 0 0 .45rem; font-size: .82rem; color: #912018; }
.fg-rusak-confirm-actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: .4rem; }
.fg-rusak-confirm-actions .btn { min-height: 54px; }
.fg-rusak-decided { margin-top: .3rem; display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; font-size: .8rem; }
.fg-rusak-label { padding: .1rem .5rem; border-radius: 999px; background: var(--light); border: 1px solid var(--border); font-weight: 800; color: var(--dark); }
.fg-rusak-st-dipakai .fg-rusak-label { background: #ECFDF5; border-color: #A7F3D0; color: #065F46; }
.fg-rusak-st-menunggu_rework .fg-rusak-label { background: #EEF2FF; border-color: #C7D2FE; color: var(--s); }
.fg-rusak-batch { font-weight: 800; color: var(--s); }
.fg-rusak-by { color: var(--muted); }
.fg-rusak-empty { padding: 1.1rem .5rem; text-align: center; color: var(--muted); font-size: .86rem; }
.fg-rusak-err { color: #912018; }
.fg-rusak-err .btn { margin-top: .5rem; min-height: 44px; }
.fg-rusak-foot { margin: .5rem 0 0; text-align: center; font-size: .74rem; color: var(--muted); }
.fg-rusak-locked { margin-top: .9rem; padding: .6rem .7rem; border-radius: 10px; background: var(--light); border: 1px solid var(--border); font-size: .85rem; color: var(--ink2); }
.ship-tag.ship-tag-qc { background: #EEF2FF; color: var(--s); font-weight: 700; }

@media (min-width: 768px) {
  .fg-rusak-why { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: .6rem; }
  .fg-rusak-why .fg-rusak-hint { grid-column: 1 / -1; }
}

/* ═══ Rework 第 2 段畫面 (production-rusak.js) — phone first, 44px targets, compact ═══ */
.fg-rw-top { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .35rem; margin-bottom: .55rem; }
.fg-rw-top-btn { min-height: 44px; padding: .35rem .3rem; border: 1.5px solid var(--border-input); border-radius: 10px; background: #fff; color: var(--ink2); font-weight: 800; font-size: .86rem; cursor: pointer; }
.fg-rw-top-btn.act { background: var(--s); border-color: var(--s); color: #fff; }
.fg-rw-chips { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .55rem; }
.fg-rw-chip { flex: 0 0 auto; min-height: 44px; padding: .25rem .6rem; border: 1px solid var(--border-input); border-radius: 999px; background: #fff; color: var(--ink2); font-weight: 700; font-size: .8rem; cursor: pointer; }
.fg-rw-chip.act { background: var(--p); border-color: var(--p); color: #fff; }
.fg-rw-list { display: grid; gap: .45rem; }
.fg-rw-case { position: relative; display: grid; gap: .3rem; width: 100%; min-width: 0; padding: .55rem 1.6rem .55rem .65rem; border: 1px solid var(--border); border-radius: 10px; background: #fff; text-align: left; font: inherit; color: inherit; cursor: pointer; min-height: 44px; }
.fg-rw-case:active { background: var(--light); }
.fg-rw-case-top { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; min-width: 0; }
.fg-rw-case-mid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem; align-items: start; }
.fg-rw-case-main { min-width: 0; overflow-wrap: anywhere; }
.fg-rw-case-main .fg-rusak-meta { display: block; }
.fg-rw-more { position: absolute; right: .6rem; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 1.3rem; }
.fg-rw-batch { padding: .08rem .5rem; border-radius: 6px; background: #EEF2FF; color: var(--s); font-weight: 800; font-size: .86rem; overflow-wrap: anywhere; }
.fg-rw-label { padding: .08rem .45rem; border-radius: 999px; background: var(--light); border: 1px solid var(--border); font-size: .74rem; font-weight: 700; color: var(--ink2); }
.fg-rw-st-selesai .fg-rw-label, .fg-rw-label.fg-rw-st-selesai { background: #ECFDF5; border-color: #A7F3D0; color: #065F46; }
.fg-rw-st-sedang_rework .fg-rw-label, .fg-rw-label.fg-rw-st-sedang_rework { background: #EEF2FF; border-color: #C7D2FE; color: var(--s); }
.fg-rw-age { margin-left: auto; font-size: .76rem; color: var(--muted); white-space: nowrap; }
.fg-rw-age-late { color: #fff; background: var(--danger); border-radius: 999px; padding: .08rem .45rem; font-weight: 800; }
.fg-rw-bar { display: flex; height: 10px; border-radius: 999px; overflow: hidden; background: #E4E7EC; }
.fg-rw-bar > span { display: block; height: 100%; }
.fg-rw-bar-ok, .fg-rw-dot-ok { background: var(--ok); }
.fg-rw-bar-bad, .fg-rw-dot-bad { background: #F97066; }
.fg-rw-bar-gone, .fg-rw-dot-gone { background: #667085; }
.fg-rw-dot-left { background: #E4E7EC; border: 1px solid #D0D5DD; }
.fg-rw-legend { display: flex; flex-wrap: wrap; gap: .15rem .7rem; font-size: .76rem; color: var(--ink2); }
.fg-rw-legend b { color: var(--dark); }
.fg-rw-dot { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; margin-right: .25rem; vertical-align: -.02rem; }
.fg-rw-link { min-height: 44px; padding: .2rem .6rem; border: 1px solid #C7D2FE; border-radius: 8px; background: #fff; color: var(--s); font-weight: 800; font-size: .8rem; cursor: pointer; }
.fg-rw-back { min-height: 44px; margin-bottom: .5rem; }
.fg-rw-detail { display: grid; gap: .4rem; padding: .6rem .65rem; border: 1px solid var(--border); border-radius: 10px; background: #fff; min-width: 0; }
.fg-rw-title { overflow-wrap: anywhere; }
.fg-rw-info { display: grid; gap: .1rem; font-size: .82rem; }
.fg-rw-info-row { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: .4rem; }
.fg-rw-info-row span { color: var(--muted); }
.fg-rw-info-row b { font-weight: 700; color: var(--dark); overflow-wrap: anywhere; }
.fg-rw-left { font-size: .95rem; color: var(--dark); }
.fg-rw-left-done { color: #065F46; font-weight: 700; }
.fg-rw-qc { padding: .35rem .55rem; border-radius: 8px; background: var(--light); border: 1px solid var(--border); font-size: .82rem; color: var(--ink2); }
.fg-rw-qc-ok { background: #ECFDF5; border-color: #A7F3D0; color: #065F46; }
.fg-rw-qc-bad { background: #FEF3F2; border-color: #FECDCA; color: #912018; font-weight: 800; }
.fg-rw-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: .4rem; margin: .55rem 0; }
.fg-rw-actions .btn { min-height: 54px; }
.fg-rw-close-btn { color: #B42318; }
.fg-rw-sec { margin-top: .7rem; display: grid; gap: .35rem; }
.fg-rw-sec-title { font-weight: 800; font-size: .9rem; color: var(--dark); margin-bottom: .2rem; }
.fg-rw-run { padding: .45rem .6rem; border: 1px solid var(--border); border-radius: 8px; background: #fff; font-size: .82rem; color: var(--ink2); overflow-wrap: anywhere; }
.fg-rw-run-close { background: #FEF3F2; border-color: #FECDCA; }
.fg-rw-run-top { display: flex; justify-content: space-between; gap: .5rem; color: var(--dark); }
.fg-rw-run-top span { color: var(--muted); white-space: nowrap; }
.fg-rw-run-by { color: var(--muted); font-size: .76rem; }
.fg-rw-stock { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .1rem .5rem; padding: .4rem .6rem; border: 1px solid var(--border); border-radius: 8px; font-size: .82rem; overflow-wrap: anywhere; }
.fg-rw-qc-tag { grid-column: 1 / -1; justify-self: start; padding: .05rem .45rem; border-radius: 999px; background: var(--light); border: 1px solid var(--border); font-size: .74rem; font-weight: 700; }
.fg-rw-qc-Pass { background: #ECFDF5; border-color: #A7F3D0; color: #065F46; }
.fg-rw-qc-Hold, .fg-rw-qc-Fail { background: #FEF3F2; border-color: #FECDCA; color: #912018; }
.fg-rw-form { margin: .55rem 0; padding: .6rem; border: 1.5px solid #C7D2FE; border-radius: 10px; background: #F8F9FF; min-width: 0; }
.fg-rw-form .ig { margin-bottom: .45rem; min-width: 0; }
.fg-rw-form input, .fg-rw-form select { min-height: 44px; width: 100%; }
.fg-rw-close { border-color: #FECDCA; background: #FFFBFA; }
.fg-rw-modes { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; margin: .45rem 0; }
.fg-rw-mode { min-height: 52px; border: 1.5px solid var(--border-input); border-radius: 10px; background: #fff; color: var(--ink2); font-weight: 800; font-size: .92rem; cursor: pointer; }
.fg-rw-mode.act { background: var(--p); border-color: var(--p); color: #fff; }
.fg-rw-qty2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .5rem; }
.fg-rw-after { margin: -.15rem 0 .4rem; font-size: .84rem; color: var(--ink2); }
.fg-rw-after-bad { color: #B42318; font-weight: 800; }
.fg-rw-mats { margin: .4rem 0; padding-top: .45rem; border-top: 1px dashed var(--border-input); }
.fg-rw-mat { display: grid; grid-template-columns: minmax(0, 1fr) 4.6rem auto 44px; gap: .35rem; align-items: center; padding: .3rem 0; border-bottom: 1px solid var(--border); }
.fg-rw-mat-name { min-width: 0; font-size: .86rem; font-weight: 700; overflow-wrap: anywhere; }
.fg-rw-mat-name small { font-weight: 400; color: var(--muted); }
.fg-rw-mat-stock { display: block; font-weight: 400; color: var(--muted); font-size: .74rem; }
.fg-rw-mat-over { color: var(--warn); font-weight: 700; }
.fg-rw-form .fg-rw-mat-qty { width: 100%; text-align: center; }
.fg-rw-mat-unit { font-size: .78rem; color: var(--ink2); min-width: 1.5rem; }
.fg-rw-mat-del { width: 44px; height: 44px; border: 1px solid var(--border-input); border-radius: 8px; background: #fff; color: var(--ink2); font-size: 1rem; cursor: pointer; }
.fg-rw-mat-find { margin-top: .45rem; }
.fg-rw-hits { display: grid; gap: .3rem; }
.fg-rw-hits:empty { display: none; }
.fg-rw-mat-hit { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem; align-items: center; min-height: 44px; padding: .35rem .6rem; border: 1px solid var(--border); border-radius: 8px; background: #fff; text-align: left; font: inherit; cursor: pointer; }
.fg-rw-mat-hit:disabled { opacity: 1; background: var(--light); color: var(--muted); cursor: default; }
.fg-rw-mat-hit .fg-rw-mat-stock { font-size: .78rem; white-space: nowrap; }
.fg-rw-mat-empty { font-size: .8rem; color: var(--muted); padding: .2rem 0; }
.fg-rw-confirm-head { margin: 0 0 .35rem; font-size: .82rem; color: var(--ink2); }
.fg-rw-yes, .fg-rw-close-yes, .fg-rw-next, .fg-rw-close-next { min-height: 54px; }
.fg-rw-rep-filters { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 .5rem; align-items: end; }
.fg-rw-rep-filters .ig { margin-bottom: .4rem; min-width: 0; }
.fg-rw-rep-filters select { min-height: 44px; width: 100%; }
.fg-rw-rep-prod { grid-column: 1 / -1; }
.fg-rw-rep-go { grid-column: 1 / -1; min-height: 48px; margin-bottom: .3rem; }
.fg-rw-rep-span { font-weight: 800; font-size: .86rem; margin: .2rem 0 .4rem; color: var(--dark); }
.fg-rw-rep-cards { display: grid; gap: .45rem; }
.fg-rw-rep-card { padding: .5rem .6rem; border: 1px solid var(--border); border-radius: 10px; background: #fff; min-width: 0; }
.fg-rw-rep-card.fg-rw-rep-total { background: #EEF2FF; border-color: #C7D2FE; }
.fg-rw-rep-head { margin-bottom: .3rem; overflow-wrap: anywhere; }
.fg-rw-rep-head small { color: var(--muted); }
.fg-rw-rep-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(6.4rem, 1fr)); gap: .25rem .45rem; }
.fg-rw-rep-cell { display: grid; min-width: 0; }
.fg-rw-rep-kg { font-size: .82rem; margin: 2px 0 6px; color: var(--text, #111); }
.fg-rw-rep-cell span { font-size: .7rem; color: var(--muted); line-height: 1.2; }
.fg-rw-rep-cell b { font-size: .95rem; color: var(--dark); }
.fg-rw-rep-tablewrap { display: none; overflow-x: auto; }
.fg-rw-rep-table { width: 100%; border-collapse: collapse; font-size: .84rem; }
.fg-rw-rep-table th, .fg-rw-rep-table td { padding: .4rem .5rem; border-bottom: 1px solid var(--border); text-align: right; white-space: nowrap; }
.fg-rw-rep-table th:first-child, .fg-rw-rep-table td:first-child { text-align: left; white-space: normal; }
.fg-rw-rep-table thead th { background: var(--light); color: var(--ink2); font-size: .76rem; }
.fg-rw-rep-table tr.fg-rw-rep-total td { background: #EEF2FF; font-weight: 800; }
.fg-rw-rep-csv { margin-top: .55rem; min-height: 48px; }
@media (min-width: 640px) {
  .fg-rw-rep-filters { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 2fr) auto; }
  .fg-rw-rep-prod, .fg-rw-rep-go { grid-column: auto; }
  .fg-rw-rep-go { margin-bottom: .4rem; }
}
/* The QC sub-tab is full width: a real table on desktop. The modal (max 640px) keeps the cards. */
@media (min-width: 900px) {
  #fg-rusak-qc-view .fg-rw-rep-tablewrap { display: block; }
  #fg-rusak-qc-view .fg-rw-rep-cards { display: none; }
}
/* Owner 2026-10-07: Rusak & Rework screens denser - smaller boxes, square corners, less spacing.
   Keeps 44px tap targets for buttons and inputs. */
[class^="fg-rw-"], [class*=" fg-rw-"], [class^="fg-rusak-"], [class*=" fg-rusak-"],
:is([class^="fg-rw-"], [class*=" fg-rw-"], [class^="fg-rusak-"], [class*=" fg-rusak-"]) :is(.btn, input, select, textarea, button) { border-radius: 0 !important; }
.fg-rw-dot { border-radius: 50% !important; }
.fg-rw-top, .fg-rusak-seg { gap: .2rem; margin-bottom: .35rem; }
.fg-rw-top-btn { padding: .2rem .25rem; font-size: .82rem; }
.fg-rw-chips { gap: .2rem; margin-bottom: .35rem; }
.fg-rw-chip { padding: .15rem .45rem; }
.fg-rw-list, .fg-rusak-list { gap: .25rem; }
.fg-rw-case { gap: .15rem; padding: .35rem 1.4rem .35rem .45rem; }
.fg-rusak-case { padding: .35rem .45rem; }
.fg-rusak-actions { gap: .2rem; margin-top: .3rem; }
.fg-rw-bar { height: 7px; }
.fg-rw-detail { gap: .25rem; padding: .4rem .45rem; }
.fg-rw-qc, .fg-rw-run, .fg-rw-stock { padding: .25rem .4rem; }
.fg-rw-actions { gap: .25rem; margin: .35rem 0; }
.fg-rw-actions .btn, .fg-rusak-confirm-actions .btn { min-height: 44px; }
.fg-rw-sec { margin-top: .45rem; gap: .2rem; }
.fg-rw-form { margin: .35rem 0; padding: .4rem; }
.fg-rw-form .ig { margin-bottom: .3rem; }
.fg-rw-mats { margin: .25rem 0; padding-top: .3rem; }
.fg-rw-mat { gap: .25rem; padding: .2rem 0; }
.fg-rw-mat-hit { padding: .2rem .45rem; }
.fg-rusak-confirm { margin-top: .3rem; padding: .4rem; }
.fg-rusak-confirm-text { margin-bottom: .3rem; }
.fg-rusak-banner, .fg-rusak-locked { padding: .35rem .5rem; }
.fg-rw-rep-card { padding: .35rem .45rem; }
.fg-rw-rep-grid { gap: .2rem .4rem; }
.fg-rw-rep-cards { gap: .25rem; }
.fg-rw-top-btn, .fg-rw-chip, .fg-rusak-seg button { min-height: 44px; }
.fg-rw-form input, .fg-rw-form select, .fg-rw-form textarea, .fg-rusak-why select, .fg-rusak-why input { min-height: 44px; padding: .3rem .5rem; font-size: .95rem; }
.fg-rw-form .btn, .fg-rw-mat-del, .fg-rw-mat-hit { min-height: 44px; }
.fg-rw-mat-del { width: 44px; height: 44px; }
.fg-rw-form label, .fg-rw-form .ig > label { margin-bottom: .1rem; font-size: .8rem; }