/* main-job.css — Pekerjaan utama: the Beranda of a QC / Gudang / Kirim main job ("Perlu dicek hari ini" and the folded rows). Logic: main-job.js.
 * Every class starts with mj-. The folded rows reuse the Beranda classes (home-details home-occasional, home-task) so they look like the floor login's row.
 * Phone first: a row is the text and ONE big button; nothing is wider than the screen; touch targets are at least 48px (gloves, weak eyes). */
.mj-home{display:block}
.mj-home [hidden]{display:none!important}
.mj-qc,.mj-first{margin:0 0 .8rem;padding:.75rem .75rem .6rem;border:1px solid var(--border,#E4E7EC);border-radius:14px;background:#fff;box-shadow:var(--sh-sm,0 1px 2px rgba(16,24,40,.06))}
.mj-qc *,.mj-qc *::before,.mj-qc *::after{box-sizing:border-box}
.mj-head{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin:0 0 .5rem}
.mj-h{margin:0 0 .5rem;font-size:1.2rem;font-weight:800;line-height:1.25;color:var(--dark,#101828)}
.mj-head .mj-h{margin:0;min-width:0;flex:1 1 auto}
.mj-rl{flex:none;width:48px;height:48px;border:1.5px solid var(--border-input,#D0D5DD);border-radius:12px;background:#fff;color:var(--dark,#101828);font:inherit;font-size:1.3rem;font-weight:800;cursor:pointer}
.mj-grp{margin:0 0 .75rem}
.mj-grp:last-of-type{margin-bottom:.3rem}
.mj-gh{display:flex;align-items:center;gap:.5rem;margin:0 0 .35rem;font-size:1.02rem;font-weight:800;line-height:1.3;color:var(--ink2,#475467)}
.mj-n{display:inline-block;min-width:1.7rem;padding:.05rem .5rem;border-radius:999px;background:#F2F4F7;color:var(--muted,#667085);font-size:.95rem;font-weight:800;text-align:center;font-variant-numeric:tabular-nums}
.mj-n.is-todo{background:#EEF2FF;color:var(--p,#4F46E5)}
.mj-empty,.mj-note{margin:.1rem 0 0;font-size:1rem;color:var(--muted,#667085)}
.mj-note{padding:.5rem .7rem;border-radius:10px;background:#FFFBEB;color:#92400E}
.mj-row{display:flex;align-items:center;gap:.6rem;padding:.5rem 0;border-top:1px solid #F1F5F9}
.mj-gh+.mj-row{border-top:0}
.mj-rt{flex:1 1 auto;min-width:0}
.mj-rt b{display:block;font-size:1.05rem;font-weight:800;line-height:1.3;overflow-wrap:anywhere}
.mj-rt small{display:block;margin-top:.1rem;font-size:.9rem;color:var(--muted,#667085);overflow-wrap:anywhere}
.mj-btn{flex:none;min-height:52px;min-width:7rem;max-width:46%;padding:.4rem .8rem;border:0;border-radius:12px;background:var(--p,#4F46E5);color:#fff;font:inherit;font-size:1rem;font-weight:800;cursor:pointer}
.mj-btn:disabled{opacity:.55;cursor:default}
.mj-all{display:block;width:100%;min-height:48px;margin-top:.3rem;border:1.5px solid var(--border-input,#D0D5DD);border-radius:12px;background:#fff;color:var(--p,#4F46E5);font:inherit;font-size:1rem;font-weight:800;cursor:pointer}
.mj-upd{margin:.4rem 0 0;font-size:.85rem;color:var(--muted,#667085)}
.mj-state{padding:1.2rem 1rem;text-align:center;color:var(--muted,#667085)}
.mj-state p{margin:.5rem 0 0;font-size:1rem}
.mj-spin{width:30px;height:30px;margin:0 auto;border:3px solid var(--border,#E4E7EC);border-top-color:var(--p,#4F46E5);border-radius:50%;animation:mjspin .8s linear infinite}
@keyframes mjspin{to{transform:rotate(360deg)}}
.mj-first .mj-h{margin-bottom:.6rem}
@media (max-width:400px){
  .mj-btn{min-width:6rem}
  .mj-qc,.mj-first{padding:.65rem .6rem .55rem}
}

/* the bottom bar of a reordered person: .tb has `transition: all .2s` and `order` is animatable, so without this the bar is drawn in the old order and reshuffles ~100 ms later */
#tabs[data-mj-bar] .tb{transition-property:color,background,background-color,border-color,box-shadow,opacity,transform}