/* =========================================================
   MrPomen — v45d · MOTION
   Gerakan yang sama untuk keempat-empat panel:
   customer, admin, foreman, superadmin.
   Fail ini hanya tambah gerakan. Warna, saiz dan susun
   atur kekal seperti asal.
   ========================================================= */

/* ---------- 1 · tukar skrin: masuk dari bawah + lut ---------- */
@keyframes mrpViewIn{
  from{opacity:0;transform:translate3d(0,12px,0)}
  to{opacity:1;transform:none}
}
.mrp-in{animation:mrpViewIn .28s cubic-bezier(.22,.61,.36,1) both}

/* ---------- 2 · tab pil yang meluncur ---------- */
.tabs{position:relative}
.tabs > .tab{position:relative;z-index:1;transition:color .22s ease}
.tabs.mrp-ind > .tab.on{background:transparent}
.mrp-pill{
  position:absolute;left:0;top:0;height:0;width:0;
  border-radius:99px;z-index:0;pointer-events:none;
  transition:transform .3s cubic-bezier(.22,.61,.36,1),
             width .3s cubic-bezier(.22,.61,.36,1);
}
.mrp-pill.mrp-jump{transition:none}

/* ---------- 3 · bar navigasi bawah ---------- */
.nv{transition:color .2s ease,background-color .22s ease}
.nv i{transition:transform .26s cubic-bezier(.34,1.42,.64,1)}
.nv.on i{transform:translateY(-2px) scale(1.08)}
@keyframes mrpPop{
  0%{transform:translateY(-2px) scale(.9)}
  55%{transform:translateY(-4px) scale(1.16)}
  100%{transform:translateY(-2px) scale(1.08)}
}
.nv.mrp-pop i{animation:mrpPop .34s cubic-bezier(.34,1.42,.64,1)}

/* ---------- 4 · tekan: kad, baris, butang ---------- */
.btn,.chip,.slot,.tab,.pf-row,.row,.item,.cd,.nv,.hub-i{
  transition:transform .14s ease,background-color .2s ease,
             color .2s ease,border-color .2s ease,box-shadow .2s ease;
}
.btn:active,.chip:active,.slot:active,.pf-row:active,.item:active,.cd:active{transform:scale(.975)}
.nv:active i{transform:translateY(-1px) scale(.94)}

/* ---------- 5 · kad senarai: naik perlahan ---------- */
@keyframes mrpRise{
  from{opacity:0;transform:translate3d(0,10px,0)}
  to{opacity:1;transform:none}
}
.mrp-rise{animation:mrpRise .3s cubic-bezier(.22,.61,.36,1) both}

/* ---------- 6 · hormat tetapan telefon ---------- */
@media (prefers-reduced-motion: reduce){
  .mrp-in,.mrp-rise,.nv.mrp-pop i{animation:none}
  .mrp-pill{transition:none}
}