/* 🔔 Penerima peringatan stok rendah (low-stock-owners.js, docs/LOW_STOCK_ALERTS.md "畫面"). Phone first: nothing wider than
   the 360px screen, every tap target >= 44px (gloves), text >= .85rem. Colour means something only where it warns: amber for
   "not run yet" and offline, red for a refused save; "Terhubung" is green, "Belum" is plain grey (not an error).
   overflow-anchor:none: the browser never moves the screen by itself here; low-stock-owners.js keeps the row being read in
   place (lsoKeep), the same on Chromium and on iOS Safari (which has no scroll anchoring). */
.lso-fold:not([open])>*:not(summary) { display: none !important; }
.lso { padding: 0 .75rem .9rem; min-width: 0; overflow-anchor: none; }
.lso-intro { font-size: .86rem; color: var(--ink2); line-height: 1.5; margin: .1rem 0 .4rem; overflow-wrap: anywhere; }
.lso-h { font-weight: 800; font-size: .95rem; color: var(--dark); margin: .9rem 0 .35rem; }
.lso-quiet { font-size: .86rem; color: var(--muted); }
.lso-pad { padding: .5rem .1rem; }
.lso-note { font-size: .86rem; border-radius: 10px; padding: .55rem .7rem; margin: .4rem 0; overflow-wrap: anywhere; line-height: 1.45; }
.lso-note-d { background: #FEF2F2; color: #991B1B; border-left: 4px solid var(--danger); }
.lso-note-w { background: #FFFBEB; color: #92400E; border-left: 4px solid var(--warn); }
.lso-btn { min-height: 48px; padding: .45rem 1rem; border: none; border-radius: 10px; background: var(--p); color: #fff; font: inherit; font-weight: 800; font-size: .92rem; cursor: pointer; }
.lso-btn:disabled { background: #C7CBD6; color: #fff; cursor: default; }
.lso-btn-full { display: block; width: 100%; margin-top: .5rem; }
.lso-btn2 { min-height: 44px; padding: .3rem .85rem; border: 1px solid var(--border-input); border-radius: 10px; background: #fff; color: var(--dark); font: inherit; font-weight: 700; font-size: .88rem; cursor: pointer; }
.lso-btn2:disabled { color: var(--muted); cursor: default; }
.lso-btn-x { color: var(--ink2); }
.lso-row { border-top: 1px solid var(--border); padding: .35rem 0 .45rem; min-width: 0; }
.lso-p-top, .lso-d-top { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; min-width: 0; }
.lso-name, .lso-cat { flex: 1 1 8rem; min-width: 0; font-weight: 700; font-size: .95rem; overflow-wrap: anywhere; }
.lso-badge { display: inline-block; padding: .2rem .55rem; border-radius: 999px; background: var(--light); border: 1px solid var(--border-input); color: var(--ink2); font-weight: 700; font-size: .82rem; white-space: nowrap; }
.lso-badge.on { background: #ECFDF5; border-color: #A7F3D0; color: #047857; }
.lso-ed { margin: .35rem 0 .1rem; padding: .55rem .6rem; background: var(--light); border: 1px solid var(--border); border-radius: 12px; }
.lso-lb { display: block; font-weight: 700; font-size: .88rem; margin-bottom: .25rem; }
.lso-in { display: block; width: 100%; min-height: 48px; padding: .5rem .7rem; border: 1.5px solid var(--border-input); border-radius: 10px; font: inherit; font-size: 1rem; background: #fff; }
.lso-chk { min-height: 1.2rem; font-size: .85rem; color: var(--ink2); margin: .2rem 0; overflow-wrap: anywhere; }
.lso-hint { font-size: .85rem; color: var(--muted); line-height: 1.45; margin: .3rem 0; overflow-wrap: anywhere; }
.lso-acts { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .4rem; }
.lso-acts .lso-btn { flex: 1 1 8rem; }
.lso-st { font-size: .86rem; margin: .3rem 0 0; overflow-wrap: anywhere; line-height: 1.4; }
.lso-st-ok { color: #047857; font-weight: 700; }
.lso-st-d { color: #991B1B; font-weight: 700; }
.lso-st-i { color: var(--ink2); }
.lso-chips { display: flex; gap: .4rem; flex-wrap: wrap; margin: .1rem 0 .4rem; }
.lso-chip { flex: 1 1 5rem; min-height: 48px; padding: .3rem .6rem; border: 1.5px solid var(--border-input); border-radius: 10px; background: #fff; color: var(--dark); font: inherit; font-weight: 800; font-size: .9rem; cursor: pointer; }
.lso-chip.on { border-color: var(--p); background: #EEF2FF; color: var(--p); }
.lso-sel { display: block; width: 100%; min-height: 48px; padding: .4rem .6rem; border: 1.5px solid var(--border-input); border-radius: 10px; font: inherit; font-size: .95rem; background: #fff; color: var(--dark); }
.lso-d-top .lso-sel { flex: 1 1 11rem; width: auto; min-width: 0; }
.lso-sw-txt, .lso-cur { font-size: .88rem; color: var(--ink2); line-height: 1.5; overflow-wrap: anywhere; }
.lso-cur { margin: .3rem 0; font-weight: 700; }
.lso-im { margin: .7rem 0; border: 1px solid var(--border); border-radius: 12px; background: #fff; overflow: hidden; }
.lso-im-hd { display: flex; flex-wrap: wrap; align-items: center; gap: 0 .3rem; width: 100%; min-height: 48px; padding: .5rem .8rem; border: none; background: none; text-align: left; font: inherit; font-weight: 800; font-size: .92rem; color: var(--dark); cursor: pointer; }
.lso-im-t { flex: 1 1 0; min-width: 0; }
.lso-im-sum { order: 3; flex: 1 1 100%; min-width: 0; text-align: left; font-weight: 600; font-size: .85rem; color: var(--ink2); overflow-wrap: anywhere; }
.lso-chev { transition: transform .15s; font-size: 1.2rem; }
.lso-im-hd.open .lso-chev { transform: rotate(90deg); }
.lso-im-body { padding: 0 .8rem .8rem; }
.lso-im-body[hidden] { display: none; }