/* Mesin & Spare part (hw-machines.js, docs/HW_MACHINES.md). Same compact style as Rusak & Rework (owner 2026-10-07):
   square corners, small boxes, little spacing; every tap target stays >= 44px. Neutral tokens only; red = low stock. */
.hwm { padding: 0 .45rem .6rem; min-width: 0; }
.hwm, .hwm *, .hwm-im, .hwm-im * { border-radius: 0 !important; }
.hwm-modal, .hwm-modal * { border-radius: 0 !important; }
.hwm-title { padding-bottom: .2rem; }
.hwm-slot { display: contents; }
.hwm-empty { padding: .9rem .5rem; text-align: center; color: var(--muted); font-size: .86rem; line-height: 1.45; }
.hwm-empty-s { padding: .35rem .4rem; color: var(--muted); font-size: .8rem; }
.hwm-muted { color: var(--muted); }
.hwm-ok { color: var(--ok); font-weight: 800; }
.hwm-bad { color: var(--danger); font-weight: 800; }
.hwm-code { color: var(--muted); font-weight: 600; font-size: .78em; }
.hwm-off { display: inline-block; padding: 0 .3rem; border: 1px solid var(--border-input); background: var(--light); color: var(--muted); font-size: .7rem; font-weight: 700; vertical-align: middle; }
.hwm-crumb { display: block; color: var(--muted); font-size: .72rem; line-height: 1.2; overflow-wrap: anywhere; }
.hwm-count { margin: .25rem 0 .2rem; font-size: .76rem; color: var(--ink2); }
.hwm-hint { margin-top: .25rem; font-size: .74rem; color: var(--muted); }

.hwm-btn { display: inline-flex; align-items: center; justify-content: center; gap: .25rem; min-height: 44px; padding: .2rem .6rem; border: 1px solid var(--border-input); background: #fff; color: var(--dark); font: inherit; font-size: .84rem; font-weight: 700; cursor: pointer; text-decoration: none; white-space: nowrap; }
.hwm-btn:disabled { opacity: .55; cursor: default; }
.hwm-btn-p { background: var(--p); border-color: var(--p); color: #fff; }
.hwm-btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.hwm-icon { min-width: 44px; min-height: 44px; border: 1px solid var(--border); background: #fff; font-size: 1rem; cursor: pointer; flex-shrink: 0; }

/* head: last sync + reload + sync */
.hwm-head { display: flex; align-items: center; gap: .3rem; margin-bottom: .3rem; }
.hwm-last { flex: 1; min-width: 0; font-size: .78rem; color: var(--ink2); line-height: 1.3; overflow-wrap: anywhere; }
.hwm-sync-err { color: #912018; font-size: .74rem; }
.hwm-sync { flex-shrink: 1; min-width: 0; white-space: normal; text-align: center; }
.hwm-banner { margin: 0 0 .3rem; padding: .35rem .5rem; font-size: .84rem; line-height: 1.4; overflow-wrap: anywhere; }
.hwm-banner-ok { background: #ECFDF5; color: #065F46; border: 1px solid #A7F3D0; }
.hwm-banner-bad { background: #FEF3F2; color: #912018; border: 1px solid #FECDCA; }
.hwm-confirm { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: .25rem; margin-top: .35rem; }
.hwm-confirm .hwm-btn { white-space: normal; }
.hwm-q { width: 100%; min-height: 44px; padding: .3rem .55rem; border: 1px solid var(--border-input); font-size: .95rem; margin-bottom: .3rem; }

/* factory chips */
.hwm-chips { display: flex; flex-wrap: wrap; gap: .2rem; margin-bottom: .1rem; }
.hwm-chip { min-height: 44px; padding: .15rem .55rem; border: 1px solid var(--border-input); background: #fff; color: var(--dark); font: inherit; font-size: .86rem; font-weight: 700; cursor: pointer; max-width: 100%; overflow-wrap: anywhere; }
.hwm-chip.act { background: var(--p); border-color: var(--p); color: #fff; }
.hwm-chip-n { font-weight: 600; opacity: .8; font-size: .78rem; }
.hwm-chip-off { color: var(--muted); }

/* areas + machines */
.hwm-area { border: 1px solid var(--border); background: #fff; margin-bottom: .2rem; }
.hwm-area-hd { display: flex; align-items: center; gap: .4rem; width: 100%; min-height: 44px; padding: .2rem .45rem; border: none; background: var(--light); font: inherit; text-align: left; cursor: pointer; }
.hwm-area-name { flex: 1; min-width: 0; font-weight: 800; font-size: .9rem; overflow-wrap: anywhere; }
.hwm-area-n { font-size: .74rem; color: var(--ink2); white-space: nowrap; }
.hwm-chev { color: var(--muted); font-weight: 800; flex-shrink: 0; transition: transform .12s; }
.hwm-chev-open, .hwm-im-hd.open .hwm-chev { transform: rotate(90deg); }
.hwm-mlist { display: grid; gap: 0; }
.hwm-m, .hwm-pick { display: flex; align-items: center; gap: .4rem; width: 100%; min-height: 44px; padding: .2rem .45rem; border: none; border-top: 1px solid var(--border); background: #fff; font: inherit; text-align: left; cursor: pointer; color: var(--dark); }
.hwm-mlist > .hwm-m:first-child { border-top: none; }
.hwm-count + .hwm-mlist { border: 1px solid var(--border); }
.hwm-m-main { flex: 1; min-width: 0; }
.hwm-m-name { display: block; font-weight: 700; font-size: .9rem; line-height: 1.25; overflow-wrap: anywhere; }
.hwm-m-side { display: flex; align-items: center; gap: .3rem; flex-shrink: 0; }
.hwm-m-off .hwm-m-name { color: var(--muted); }
.hwm-m-off { background: var(--light); }
.hwm-area-off > .hwm-area-hd .hwm-area-name { color: var(--muted); }
.hwm-m-static { cursor: default; }
/* Super / Office: show inactive machines */
.hwm-offtg { width: 100%; justify-content: flex-start; margin-bottom: .3rem; font-weight: 700; white-space: normal; text-align: left; }
.hwm-offtg-box { display: inline-flex; align-items: center; justify-content: center; width: 1.2rem; height: 1.2rem; border: 2px solid var(--border-input); background: #fff; color: #fff; font-size: .8rem; flex-shrink: 0; }
.hwm-offtg.on .hwm-offtg-box { background: var(--p); border-color: var(--p); }
.hwm-st { display: inline-block; padding: 0 .3rem; font-size: .7rem; font-weight: 700; border: 1px solid var(--border); background: var(--light); color: var(--ink2); white-space: nowrap; }
.hwm-st-running { color: #065F46; border-color: #A7F3D0; background: #ECFDF5; }
.hwm-st-repairing { color: #8C4A06; border-color: #FDE3C0; background: #FEF0DC; }
.hwm-st-scrapped { color: var(--muted); }
.hwm-pc { font-size: .76rem; font-weight: 800; color: var(--s); white-space: nowrap; }
.hwm-pc0 { color: var(--muted); font-weight: 600; }

/* machine parts */
.hwm-back { min-height: 44px; padding: .15rem .5rem; border: 1px solid var(--border-input); background: #fff; font: inherit; font-size: .86rem; font-weight: 700; color: var(--p); cursor: pointer; margin-bottom: .3rem; }
.hwm-mhead { padding: .35rem .45rem; border: 1px solid var(--border); border-left: 3px solid var(--p); background: #fff; margin-bottom: .25rem; min-width: 0; }
.hwm-mtitle { font-size: 1.05rem; font-weight: 800; line-height: 1.25; overflow-wrap: anywhere; }
.hwm-mmeta { margin-top: .1rem; font-size: .78rem; color: var(--ink2); }
.hwm-parts { display: grid; gap: .2rem; }
.hwm-part { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: .4rem; padding: .3rem .4rem; border: 1px solid var(--border); background: #fff; align-items: start; min-width: 0; }
.hwm-part-low { border-left: 3px solid var(--danger); }
.hwm-ph { width: 56px; height: 56px; padding: 0; border: 1px solid var(--border); background: var(--light); cursor: pointer; overflow: hidden; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; }
.hwm-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hwm-ph-none { cursor: default; color: var(--muted); }
.hwm-pbody { min-width: 0; display: grid; gap: .15rem; }
.hwm-pname { display: block; min-width: 0; overflow-wrap: anywhere; }
.hwm-pdet-btn { display: flex; align-items: flex-start; gap: .3rem; width: 100%; min-height: 44px; padding: 0; border: none; background: none; font: inherit; text-align: left; cursor: pointer; color: inherit; }
.hwm-pdet-btn > .hwm-chev { margin-left: auto; padding-top: .1rem; }
.hwm-part { cursor: pointer; }
.hwm-pn { display: block; font-weight: 800; font-size: .92rem; line-height: 1.25; }
.hwm-pmeta { display: block; font-size: .74rem; color: var(--muted); }
.hwm-locs { display: flex; flex-wrap: wrap; gap: .15rem; }
.hwm-loc { padding: 0 .3rem; border: 1px solid #C7D2FE; background: #EEF2FF; color: var(--s); font-size: .72rem; font-weight: 700; }
.hwm-note { font-size: .76rem; color: var(--ink2); overflow-wrap: anywhere; }
.hwm-sup { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem; font-size: .78rem; }
.hwm-sup-n { flex: 1 1 100%; color: var(--ink2); overflow-wrap: anywhere; }
.hwm-wa { color: #067647; border-color: #ABEFC6; background: #ECFDF3; }
.hwm-extra { display: flex; flex-wrap: wrap; gap: .2rem; align-items: flex-start; }
.hwm-more { flex: 1 1 8rem; min-width: 0; font-size: .78rem; color: var(--ink2); }
.hwm-more[open] { flex-basis: 100%; }
.hwm-more > summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-weight: 700; color: var(--p); list-style-position: inside; }
details.hwm-more:not([open]) > *:not(summary) { display: none !important; } /* lesson details-collapse-needs-css-guard */
.hwm-more-body { padding: .2rem 0 .1rem; overflow-wrap: anywhere; white-space: pre-line; }
.hwm-qty { text-align: right; white-space: nowrap; line-height: 1.15; }
.hwm-qty b { display: block; font-size: 1.15rem; font-weight: 800; }
.hwm-qty span { font-size: .74rem; color: var(--ink2); }
.hwm-qty small { display: block; font-size: .68rem; color: var(--muted); }
.hwm-qty-low b, .hwm-qty-low span { color: var(--danger); }

/* item form: Dipakai di mesin */
.hwm-im { margin-top: .5rem; border: 1px solid var(--border); background: #fff; }
.hwm-im-hd { display: flex; align-items: center; gap: .3rem; width: 100%; min-height: 44px; padding: .2rem .5rem; border: none; background: var(--light); font: inherit; font-weight: 800; font-size: .92rem; text-align: left; cursor: pointer; color: var(--dark); }
.hwm-im-hd > .hwm-chev { margin-left: auto; }
.hwm-im-sum { color: var(--ink2); font-weight: 700; }
.hwm-im-body { padding: .3rem .4rem .4rem; }
.hwm-im-body[hidden] { display: none !important; }
.hwm-im-list { display: grid; gap: .2rem; margin-bottom: .25rem; }
.hwm-im-row { display: flex; align-items: flex-start; gap: .3rem; padding: .25rem .35rem; border: 1px solid var(--border); min-width: 0; }
.hwm-im-main { flex: 1; min-width: 0; display: grid; gap: .15rem; }
.hwm-im-note { width: 100%; min-height: 44px; padding: .25rem .45rem; border: 1px solid var(--border-input); font-size: .88rem; }
.hwm-im-actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .25rem; }
.hwm-im-actions .hwm-btn { white-space: normal; }
.hwm-im-pick { margin-top: .3rem; padding: .3rem; border: 1px solid var(--border-input); background: var(--light); }
.hwm-im-res { display: grid; max-height: 50vh; overflow-y: auto; border: 1px solid var(--border); background: #fff; }
.hwm-im-res > .hwm-pick:first-child { border-top: none; }
.hwm-pick.on { color: var(--muted); cursor: default; }
.hwm-pick-act { flex-shrink: 0; font-weight: 800; color: var(--p); min-width: 1.5rem; text-align: center; }
@media (min-width: 900px) {
  .hwm-parts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* part detail (read-only sheet; same compact style) */
.modal.hwm-modal { padding: .7rem .7rem .9rem; }
.hwm-det { display: grid; gap: .35rem; min-width: 0; }
.hwm-det-ph { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 200px; padding: 0; border: 1px solid var(--border); background: var(--light); cursor: zoom-in; overflow: hidden; font-size: 2.4rem; }
.hwm-det-ph img { width: 100%; height: 100%; object-fit: contain; display: block; }
.hwm-det-ph.hwm-ph-none { height: 72px; cursor: default; color: var(--muted); }
.hwm-det-zoom { position: absolute; right: 0; bottom: 0; padding: .1rem .3rem; background: rgba(255, 255, 255, .9); font-size: .85rem; }
.hwm-det-name { font-size: 1.1rem; font-weight: 800; line-height: 1.25; overflow-wrap: anywhere; }
.hwm-det-lab { font-size: .7rem; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .02em; margin-bottom: .1rem; }
.hwm-det-sec { padding-top: .3rem; border-top: 1px solid var(--border); min-width: 0; }
.hwm-det-stock { padding: .3rem .45rem; border: 1px solid var(--border); background: #fff; }
.hwm-det-stock b { font-size: 1.4rem; font-weight: 800; }
.hwm-det-stock span { font-size: .85rem; color: var(--ink2); }
.hwm-det-stock small { font-size: .78rem; color: var(--muted); }
.hwm-det-stock.hwm-qty-low { border-left: 3px solid var(--danger); }
.hwm-det-sp { margin-top: .2rem; }
.hwm-det-text { font-size: .86rem; color: var(--dark); }
.hwm-det-ml { border: 1px solid var(--border); }
.hwm-det-ml > .hwm-m:first-child { border-top: none; }
.hwm-det-edit { width: 100%; margin-top: .2rem; }